HardBirch

使用CSS3创建文字颜色渐变(CSS3 Text Gradient)

时间:11-02-28 栏目:HTML5移动开发 作者:张飞不张,文采横飞 评论:21 点击: 8,413 次

转载请标明出处:蒋宇捷(hfahe) http://blog.csdn.net/hfahe


         考虑一下,如何在网页中达到类似以下文字渐变的效果?


         传统的实现中,是用一副透明渐变的图片覆盖在文字上。具体实现方式可参考http://www.qianduan.net/css-gradient-text-effect.html。这种方式优点是图片可控,所以可实现很复杂的渐变效果,但是缺点是图片渐变色必须与背景色一致,同时损失了鼠标点击、文字选择等事件。

         改进的方法可以使用CSS3的背景渐变-webkit-gradient,用一个背景渐变的DIV代替图片。下面是实现效果示例,相比以上方案优点是不使用图片,减小请求量和流量,但是对于以上缺点,仍然无法解决。


         有没有完美的解决方案呢?

         以下介绍使用-webkit-mask遮罩的方案来实现文字渐变,完全避免了以上方案的不足。下面是实现的完美效果图:


         现在让我们开始CSS3 Text
Gradient
之旅。

-->         1、  -->构建HTML内容和基本样式:

         我们使用一个H1标签包裹一个A标签:

 

         样式定义如下,我们使用text-shadow为文字添加阴影:

 

         基本效果如下:


-->         2、  -->添加渐变效果:

         我们通过CSS3mask属性为文字添加线性渐变。和background的渐变相比,可以理解为background是在文字后面,而mask是叠加在文字上面的。Mask可以设置为普通颜色、线性渐变、径向渐变或者图片。

         代码如下:

 

         效果如下所示:


 

-->         3、  -->渐变为另外一种颜色:

         因为-webkit-gradient实际上是按照图片的方式进行处理的,所以我们不能通过设置文字颜色为渐变来实现文字颜色渐变为另外一种颜色的效果(不信的话你可以试试)。

         所以我们要构造一个伪元素,内容和我们的文本一样,使用伪元素的原因是避免再添加一个同样内容的标签造成代码冗余:

 

         然后我们通过position属性将两个文本重叠在一起:

 

 

         效果如下图所示:


 

-->         4、  -->添加背景:

         这种实现方式的优势是我们可以自定义背景,完全不受渐变颜色的影响。例如我们可以为文字添加一副背景,效果如下:


         很棒的效果,不是吗:)

-->         5、  -->其他:

         CSS3 mask的详细信息可以参考Webkit.org文章

 

 

 

声明: 本文由( 张飞不张,文采横飞 )原创编译,转载请保留链接: 使用CSS3创建文字颜色渐变(CSS3 Text Gradient)

使用CSS3创建文字颜色渐变(CSS3 Text Gradient):目前有21 条留言

  1. 21楼
    cntianya:

    [e04][e05][e06]

    2011-03-01 16:58 [回复]
  2. 20楼
    liudou327:

    [e01]

    2011-03-02 17:14 [回复]
  3. 学习下……[e01]

    2011-03-02 21:22 [回复]
  4. 18楼
    zzuzys:

    [e01][e10]

    2011-03-03 19:30 [回复]
  5. [e01]

    2011-03-06 14:17 [回复]
  6. 16楼
    fdsx2118:

    呵呵,学习了

    2011-03-06 15:05 [回复]
  7. 15楼
    jiguangxht:

    [e01]

    2011-03-09 05:20 [回复]
  8. 好漂亮 的字啊,学了,改天试试[e01]www.aimeni.com[e01]

    2011-03-09 14:45 [回复]
  9. 13楼
    shui_hu_die:

    恩,太厉害了!!!

    2011-03-09 16:29 [回复]
  10. 12楼
    goodusahost:

    [e03]初学者,还请多多指教~~~
    QQ47727790
    http://blog.goodusahost.com/
    [e01]

    2011-03-12 10:18 [回复]
  11. 11楼
    preciousboy:

    这个不错,[e10]

    2011-03-16 12:55 [回复]
  12. [e01] 高人。。。

    2011-03-17 18:15 [回复]
  13. 9楼
    lxiron:

    [e01][e02]

    2011-03-18 23:25 [回复]
  14. 8楼
    aaabccddd:

    很好[e01][e04][e10]

    2011-03-19 17:13 [回复]
  15. 7楼
    zhanyunzhu:

    [e01]

    2011-03-19 22:02 [回复]
  16. [e01]

    2011-03-19 22:49 [回复]
  17. 5楼
    athenazyx:

    [e01][e03]我收藏啦,多谢分享!

    2011-03-20 12:05 [回复]
  18. [e03]

    2011-03-25 19:14 [回复]
  19. 地板
    yorts52:

    [e01]学习

    2011-03-26 20:01 [回复]
  20. 为什么我复制你的代码没有效果呢

    2011-03-28 16:08 [回复]
  21. 沙发
    hfahe:

    回复 zhuxiaoleiwoaini:确认是否chrome或者safari浏览器。

    2011-03-28 16:22 [回复]

发表评论


QQ群互动

Linux系统与内核学习群:194051772

WP建站技术学习交流群:194062106

魔豆之路QR

魔豆的Linux内核之路

魔豆的Linux内核之路

优秀工程师当看优秀书籍

优秀程序员,要看优秀书!

赞助商广告

友荐云推荐