码迷,mamicode.com
首页 > Web开发 > 详细

CSS3制作渐变文字

时间:2014-07-07 11:46:47      阅读:268      评论:0      收藏:0      [点我收藏+]

标签:http   color   strong   width   os   html   

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里,通过以下代码发现,它的这种渐变效果运用的是后者,也更具多样化(这里下面会再做补充)。

bubuko.com,布布扣



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

标题文字(默认):                                  标题文字(鼠标经过):

bubuko.com,布布扣        bubuko.com,布布扣




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


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)));                       /* 添加渐变蒙板*/

}


预览效果:

bubuko.com,布布扣


以上,添加注释的两个属性为关键属性。渐变蒙板的设置一般是从一个不透明色到透明色的渐变过渡(即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;                  /*剪辑背景*/

}


预览效果:

bubuko.com,布布扣

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



参考资料:

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

CSS3制作渐变文字,布布扣,bubuko.com

CSS3制作渐变文字

标签:http   color   strong   width   os   html   

原文地址:http://www.cnblogs.com/xiaohong/p/3820459.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!