10
69
Градиентная (радужная) заливка текста
Градиентная заливка текста это наверно самый красивый пример оформления текста. Согласитесь, что однотонные тексты смотрятся гораздо более мрачными, чем переливающиеся различными цветами. Но, главное не переусердствуйте и старайтесь использовать данную радужную заливку только для заголовков.
Пример такой радужной (градиентной) заливки представлен ниже:
Для получения такой градиентной (радужной) заливки текста Вам понадобиться вставить в начало своей странички следующий JavaScript код:
JavaScript код:
<script type="text/javascript">
var tohex = new Array(256);
var hex = "0123456789ABCDEF";
var count = 0;
for (x=0; x<16; x++) {
for (y=0; y<16; y++) {
tohex[count] = hex.charAt(x) + hex.charAt(y);
count++;
}
}
function ColorCode(hexcode) {
if (hexcode.length == 7) {
this.r = parseInt(hexcode.substring(1,3),16);
this.g = parseInt(hexcode.substring(3,5),16);
this.b = parseInt(hexcode.substring(5,7),16);
}
else if (hexcode.length == 6) {
this.r = parseInt(hexcode.substring(0,2),16);
this.g = parseInt(hexcode.substring(2,4),16);
this.b = parseInt(hexcode.substring(4,6),16);
}
else { this.r = this.g = this.b = 0; }
}
function ColorList(hexcodes) {
var i = 0;
var c = 0;
this.codes = new Array(Math.round(hexcodes.length/7));
while (i < hexcodes.length) {
if (isNaN(parseInt(hexcodes.substring(i,i+6),16))) ++i;
else {
this.codes[c] = new ColorCode(hexcodes.substring(i,i+6));
i += 7;
++c;
}
}
this.len = c;
}
function interpolate (x1, y1, x3, y3, x2) {
if (x3 == x1) return y1
else return (x2-x1)*(y3-y1)/(x3-x1) + y1
}
function lowcolorindex (x, y, z) {
if (y == 1) return 0
else return Math.floor( (x*(z-1))/(y-1) )
}
function hicolorindex (x, y, z, low) {
if ( low*(y-1) == x*(z-1) ) return low
else if (y == 1) return 0
else return Math.floor( (x*(z-1))/(y-1) + 1 )
}
function gradient (thetext,thecolors) {
var colors = new ColorList(thecolors);
var numcolors = colors.len;
var numchars = thetext.length;
for (i=0; i<numchars; ++i) {
lci = lowcolorindex(i, numchars, numcolors);
hci = hicolorindex(i, numchars, numcolors, lci);
rr = Math.round(interpolate( lci/(numcolors-1), colors.codes[lci].r,
hci/(numcolors-1), colors.codes[hci].r, i/(numchars-1)));
gg = Math.round(interpolate( lci/(numcolors-1), colors.codes[lci].g,
hci/(numcolors-1), colors.codes[hci].g, i/(numchars-1)));
bb = Math.round(interpolate( lci/(numcolors-1), colors.codes[lci].b,
hci/(numcolors-1), colors.codes[hci].b, i/(numchars-1)));
document.write(thetext.charAt(i).fontcolor(tohex[rr]+tohex[gg]+tohex[bb]));
}
}
</script>В том месте странички, где Вы хотите получить такую красивую градиентную заливку текста, используйте следующий JavaScript код:
JavaScript код:
<script type="text/javascript">
gradient("Пример градиентной заливки тремя разными цветами",
"#88FF88 #0000FF #FF0000");
document.write('<br>');
gradient("В этом примере уже переливаются шесть разных цветов",
"#EE7777 #EEEE77 #77EE77 #77EEEE #7777EE #EE77EE");
document.write('<br>');
gradient("А здесь используется только два цвета", "#CC00CC #00CC00");
document.write('<br>');
</script>Обратите внимание, на то, что при вызове функции gradient можно использовать различное количество цветов для заливки в формате HEX.
Дата создания: 14:29:24 03.07.2011 г.
Дата обновления: 22:36:47 08.03.2012 г.
Посещений: 7313 раз(а).
Комментарии посетителей (1 шт.):
Серж
# 90(22:08:25 21.02.2012 г.)
Очень удобен для большого текста, но для обработки всего одной строчки лучше использовать программу ColorString она прописывает HTML цвет для каждой буквы, что не приемлемо для больших объемов. Эффект будет тот же.
Ответить
Перед публикацией все комментарии проходят обязательную модерацию!
Если Вы хотите задать какой-либо вопрос, то сделайте это на нашем форуме.
Таким образом, Вы сможете быстрее получить ответ на интересующий Вас вопрос.