Three-dimensional text gradient effect implemented by jQuery_jquery

Let’s take a look at two pictures:

The effect is very good, right? Would you mistake these fonts for images? This is not a picture, but an online demonstration implemented with JS

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

Let’s briefly share the implementation process and principle (the jquery lib is used in the website, we will not implement it separately here, what we share here is also the implementation method of jquery):

HTML code:

Copy code The code is as follows:

© 2009 Dragon Interactive . All Rights Reserved.

In order to facilitate code reuse, we use class to identify which text needs to add this special effect. Rainbows are used here.

CSS code:

Copy code The 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;
}

The main instructions here The meaning of the two classes highlight and shadow can be understood literally. These two classes are set to increase the three-dimensionality of the font. One is white highlight and the other is black shadow.

JS part:

Copy code The code is as follows:

function initGradients(s) { $(function() { $(s).each(function() { var el = this; var from = $(el).attr('gradFromColor')||'#ffffff', 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 < h; 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('' html '') } cacheHTML.push('' html '','' html ''); $(cacheHTML.join('')).appendTo(this) }) }) } //这个部分就是调用了，传入要添加效果的元素，这里可以是jquery的任意选择符。 initGradients('.rainbows'); function initGradients(s) {
$(function() {
$(s).each(function() {
var el = this;
var from = $(el).attr('gradFromColor')||'#ffffff', 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 < h; 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('' html '')
}
cacheHTML.push('' html '','' html '');
$(cacheHTML.join('')).appendTo(this)
})
})
}
//这个部分就是调用了，传入要添加效果的元素，这里可以是jquery的任意选择符。
initGradients('.rainbows');

代码看起来并不算多，但是如果想明白原理的话还是要认真的理解下这个代码的。

结合JS/CSS我们可以看出其大概的思路如下：


程序首先算出字体所在容器的高度N，然后清空容器内容，并添加N个span，每个span内容都为原容器的文字，每个span的颜色根据渐变色进行计算，而且其中的文字定位都相比之前一个span的文字向上偏移一个像素。CSS中可以看到，每个span的高度都为1。这样，我们就通过N各不同颜色的1px的span把字体“拼”出来了，然后加上“高光/阴影”就搞定。

基于jQuery的立体文字渐变效果