Three-dimensional text gradient effect implemented by jQuery

Take a look at the two figures:

The results are good, right? Will these fonts be incorrect? This is not an image, but implemented in JS.

Online Demo http://demo.jb51.net/js/gradient-test/demo.htm

The following is a brief introduction of the implementation process and principles. (If jquery lib is used on the website, we will not implement it on our own. Here we will share the jquery implementation method ):

HTML code:
Copy codeThe Code is as follows:
<Span class = "rainbows">©2009 Dragon Interactive. All Rights Reserved. </span>

To facilitate code reuse, we use class to identify which texts need to be added with this special effect. Here we use rainbows.

CSS code:
Copy codeThe Code is as follows:
. Rainbows {position: relative; display: block ;}. rainbow {background: transparent; display: block; position: relative; height: 1px; overflow: hidden; z-index: 5 ;}. rainbow span {position: absolute; display: block; top: 0; left: 0px ;}. rainbows. highlight {color: # fff; display: block; position: absolute; top:-2px; left: 0px; z-index: 4 ;}. rainbows. shadow {color: #000; display: block; position: absolute; opacity: 0.5; filter: alpha (opacity = 50); top: 2px; left: 2px; z-index: 3 ;}. rainbows {position: relative; display: block ;}
. Rainbow {
Background: transparent;
Display: block;
Position: relative;
Height: 1px;
Overflow: hidden;
Z-index: 5;
}

. Rainbow span {
Position: absolute;
Display: block;
Top: 0;
Left: 0px;
}

. Rainbows. highlight {
Color: # fff;
Display: block;
Position: absolute;
Top:-2px;
Left: 0px;
Z-index: 4;
}

. Rainbows. shadow {
Color: #000;
Display: block;
Position: absolute;
Opacity: 0.5;
Filter: alpha (opacity = 50 );
Top: 2px;
Left: 2px;
Z-index: 3;
}

Here, we will mainly explain the significance of the highlight and shadow classes. In fact, they can be understood literally. These two classes are set to increase the size of the font, and one is the white highlight, one is a black shadow.

JS section:
Copy codeThe Code is as follows:
Function initGradients (s) {$ (function () {$ (s ). each (function () {var el = this; var from = $ (el ). attr ('gradfromcolor') | '# ffff', to = $ (el ). attr ('gradtocolor') | '#000000'; var fR = parseInt (from. substring (1, 3), 16), fG = parseInt (from. substring (3, 5), 16), fB = parseInt (from. substring (5, 7), 16), tR = parseInt (. substring (1, 3), 16), tG = parseInt (. substring (3, 5), 16), tB = parseInt (. subs Tring (5, 7), 16); var h = $ (this ). height () * 1.5; var html, cacheHTML = []; this. initHTML = html = this. initHTML | this. innerHTML; this. innerHTML = ''; for (var I = 0; I $ (Function (){
$ (S). each (function (){
Var el = this;
Var from = $ (el ). attr ('gradfromcolor') | '# ffff', to = $ (el ). attr ('gradtocolor') | '#000000 ';
Var fR = parseInt (from. substring (1, 3), 16 ),
FG = parseInt (from. substring (3, 5), 16 ),
FB = parseInt (from. substring (5, 7), 16 ),
TR = parseInt (to. substring (1, 3), 16 ),
TG = parseInt (to. substring (3, 5), 16 ),
TB = parseInt (to. substring (5, 7), 16 );

Var h = $ (this). height () * 1.5;
Var html, cacheHTML = [];
This. initHTML = html = this. initHTML | this. innerHTML;
This. innerHTML = '';
For (var I = 0; I Var c = '#' + (Math. floor (fR * (h-I)/h + tR * (I/h ))). toString (16) + (Math. floor (fG * (h-I)/h + tG * (I/h ))). toString (16) + (Math. floor (fB * (h-I)/h + tB * (I/h ))). toString (16 );
CacheHTML. push ('<span class = "rainbow-' + I + '" style = "color:' + c + ';"> <span style = "top: '+ (-I-1) + 'px; ">' + html + '</span> ')
}
CacheHTML. push ('<span class = "highlight">' + html + '</span> ', '<span class = "shadow">' + html + '</span> ');
$ (CacheHTML. join (''). appendTo (this)
})
})
}
// This part is called. It is used to pass in the element to add effects. This can be any choice character of jquery.
InitGradients ('. rainbows ');


The Code does not seem to be a lot of, but if you want to understand the principle, you need to carefully understand the code.

Combined with JS/CSS, we can see that the general idea is as follows:


The program first calculates the height N of the container where the font is located, then clears the container content, and adds N spans. The content of each span is the text of the original container, and the color of each span is calculated based on the gradient, in addition, the text positioning is offset by one pixel from the text of the previous span. CSS shows that the height of each span is 1. In this way, the font is "spelled" by The 1px span of N different colors, and "highlight/Shadow" is added.

JQuery-based three-dimensional text gradient effect