CSS3制作渐变文字

CSS3制作渐变文字（-webkit-mask-image 与 -webkit-background-clip）

        今天去css-tricks无意间发现了标题运用渐变文字这一效果，这使的想起了webkit内核浏览器的一些私有属性。而实现渐变文字这一特效可以借助webkit浏览器的两个私有属性-webkit-mask-image与-webkit-background-clip。

        既然称之为webkit私用属性，我想大家都懂的，要用webkit内核浏览器才能看到效果。Chrome/Safari，这两个浏览器都可以的。

        mask-image，从表层文字来看，mask为遮罩的意思，在这里就是给一个元素添加蒙板，配合渐变色来剪辑出你想要的渐变字体效果。而background-clip，这个也是类似的含义，不多做说明了。

        在css-tricks里，通过以下代码发现，它的这种渐变效果运用的是后者，也更具多样化（这里下面会再做补充）。

这里是来自css-tricks的预览效果

标题文字（默认）：                                  标题文字（鼠标经过）：

举个简单地例子来加以说明吧：

1、-webkit-mask-image

HTML：

<p class="wrd1">-webkit-mask-image</p>

CSS:

.wrd1 {

width:800px; 

font:bold 3em Arial,Helvetica,sans-serif; 

color:#800; 

position:relative; 

}

.wrd1:before { 

content:‘Text-file-color 1‘;  

color:#f00;          /*设置字体色值*/

position:absolute; 

left:1px;

z-index:2;

 -webkit- mask-image:-webkit- gradient(linear,0 0,0 100%,from(rgba(255,0,0,1)),to(rgba(0,0,255,0)));                       /* 添加渐变蒙板*/

}

预览效果：

以上，添加注释的两个属性为关键属性。渐变蒙板的设置一般是从一个不透明色到透明色的渐变过渡（即opacity值的变化），这里不论你设置什么颜色都将以“不透明--半透明--透明”来显示。

或许你会觉得奇怪，为什么我在“.wrd1:before”里设置渐变蒙板，而不是直接在.wrd1中设置?其实这里的content:‘Text-file-color‘;  ，是相当于把文字复制了一层出来。上面说了，渐变蒙板实现的是一种“透明-半透明-不透明”的文字效果，我们需要实色的文字，就把这两个文字重叠到一起，含有透明的放在上方就可以了……

要注意的是：渐变颜色值中必须有透明色值才能实现此效果。

2、-webkit-background-clip

HTML:

<p class="wrd2">-webkit-mask-image</p>

CSS:

.wrd2 {

width:800px; 

font:bold 3em Arial,Helvetica,sans-serif; 

color:transparent;         /*将字体设置为透明色*/

background:-webkit-gradient(linear,0 0,0 100%,from(#f00),to(#800));   /*渐变背景*/

-webkit-background-clip:text;                  /*剪辑背景*/

}

预览效果：

同理，添加注释的地方也是关键点。要注意的是得把字体给设置为透明了，不然你看不到想要的效果，呵呵……其实的，在于对这些属性的理解，在这里我想三言两语也不能说完，文章结尾我提供一些相关资料供大家参考吧！

参考资料：

1、http://css-tricks.com/webkit-image-wipes/ 

2、http://hi.baidu.com/alimyself/item/0db68b18acf819693f87ce85 

3、http://www.qianduan.net/css3-text-gradient.html 

4、http://www.nowamagic.net/csszone/css_Css3TextGradient.php