텍스트에 글라데이션 효과
작성자 정보
- 관리자 작성
- 작성일
컨텐츠 정보
- 4,653 조회
- 1 댓글
- 목록
본문
<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>
<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>
관련자료
-
이전
-
다음
댓글 1
머문자리님의 댓글
- 머문자리
- 작성일
좋은정보 감사합니다.