텍스트에 글라데이션 효과

관리자 1 4,001
<html>
<head>
    <title></title>

<STYLE type="text/css">
.textprop {font-family:arial; font-size:30pt; font-weight:bold;}
</STYLE>

<SCRIPT LANGUAGE="JavaScript">
var h="0123456789ABCDEF";
var Fullrgb = "#000000";

function gradient(string, startcolor, endcolor) {
    startcolor = "0x" + startcolor;
    endcolor = "0x" + endcolor;
    var len = string.length;
    var color;
    var start_red = startcolor >> 16;
    var start_green=(startcolor & 0x00FF00) >> 8;
    var start_blue=startcolor & 0x0000FF;
    var end_red = endcolor >> 16;
    var end_green= (endcolor & 0x00FF00) >> 8;
    var end_blue = endcolor & 0x0000FF;
    var incRed = Math.floor((end_red - start_red) / len);
    var incGreen = Math.floor((end_green - start_green) / len);
    var incBlue = Math.floor((end_blue - start_blue) / len);
    for (var x=0; x < len; x++) {
        if (start_red + incRed >= 0x00 && start_red + incRed <= 0xFF) start_red += incRed;
        if (start_green + incGreen >= 0x00 && start_green + incGreen <= 0xFF) start_green += incGreen;
        if (start_blue + incBlue >= 0x00 && start_blue + incBlue <= 0xFF) start_blue += incBlue;
            color = hex(merge(start_red, start_green, start_blue));
            color = Fullrgb.substring(0, 6 - color.length + 1) + color;
            document.write("<font color = " + color + ">", string.charAt(x), "</font>");
    }
}

function merge(r, g, b) { 
    return (r << 16 | g << 8 | b);
}

function hex(c) {
    var temp = "";
    var hexStr = "";
    var remainder, i;
        for ( ; c != 0; c >>= 4) {
            remainder = c % 16;
            hexStr += h.charAt(remainder);
        }
        for (i=5 ; i >= 0; i--)temp += hexStr.charAt(i);
        return temp;
}

</SCRIPT>
</head>
<body>   

<div id ='textL' class=textprop>
    <script>
    gradient("www.teckel.co.kr", "0000FF", "FF0000");
    document.write("<br>");
    gradient("www.teckel.co.kr", "FFFF00", "0099FF");
    document.write("<br>");
    gradient("www.teckel.co.kr", "33FF66", "CC3399");
    </script>
</div>

</BODY>
</HTML>

Comments

머문자리
좋은정보 감사합니다.
광고
페이스북에 공유 트위터에 공유 구글플러스에 공유 카카오스토리에 공유 네이버밴드에 공유