CSS3 文字渐变 | CSS | 前端观察

前端观察  •  扫码分享
我是创始人李岩：很抱歉！给自己产品做个广告，点击进来看看。  
您的位置：首页 > CSS > CSS3 文字渐变

CSS3 文字渐变
神飞 发表于 27. May, 2011, 分类: CSS , 9 条评论 »
标签：文字渐变 & 渐变

之前，我们有发表过CSS文字渐变效果，但是其实那并不是纯粹的基于CSS的渐变，它需要一张半透明渐变的png图片。今天我们将介绍两种使用CSS3实现实现文字的方法。嗯，只有webkit浏览器支持，请暂时无视其它浏览器。

1.-webkit-mask

在《CSS的未来：一些试验性CSS属性》中，我们提到了这个属性，相对于Firefox只能用svg做mask，webkit则灵活很多，图片和css3渐变均可。最初注意到这种效果是在舜子的PJblog中： 

.textGradient1{
-webkit-mask: -webkit-gradient(linear,0% 0%,0% 100%,from(rgba(222,187,71,0.8)),to(rgba(36,142,36,0.2)));
}


不足：这个方法是利用蒙板的透明度来实现的，而蒙板的颜色并不能用于渐变中，从例子中可以看到设置的渐变色被无视了，有用的只是alpha值。那么这里的渐变要依赖字体的颜色——也就是说，只支持单色渐变。

2.-webkit-background-clip:text

严格来说，这个方法需要几个属性组合，包括colorhttp://www.qianduan.net-webkit-text-fill-color和背景渐变：


.textGradient2{background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#DEBB47), to(#248F24));
color: transparent;
http://www.qianduan.net*-webkit-text-fill-color: transparent;*http://www.qianduan.net
-webkit-background-clip: text;}


要点：

    

  • colorhttp://www.qianduan.net-webkit-text-fill-color的目的是一样的，就是让文字透明，因为其它浏览器不支持下面的属性值，所以这里建议采用后者，color属性会让文字在其它浏览器中透明掉。

  • -webkit-background-clip属性的text值是webkit独有的，gecko、opera和IE9虽然也支持这个属性，但是并不支持text值，这是关键所在。

  • 到现在大家应该能看到这个方法的原理是将文字挖空，从而露出背景色。所以背景色在这里是关键，而背景色的渐变可以使用任何颜色，所以，这个方法支持真正的彩色渐变。


    这里是一个简单的在线演示，预览效果：

    

    当然，结合-webkit-text-stroke属性，你可以创建更酷的CSS渐变效果。

    当然，如果你有其它浏览器中实现纯CSS渐变的方法，欢迎分享 :)
	

    
	
    
	
	
	
	
	
	






	
     作者: 	神飞
    
		爱好前端设计与开发，崇尚一目了然的设计。现居深圳，就职于腾讯ISUX团队
Follow me on twitter @qianduan。	

	
    如果你喜欢本文，欢迎 订阅本站 以获得本站最新内容。


    您或许也会喜欢：
    • 网站设计中漂亮的文字渐变效果
    • webkit对于CSS3渐变样式语法的更新
    • 纯CSS3文字 渐变内发光投影效果
    • 一些上流的CSS3图片样式
    • 理解CSS3线性渐变
    • CSS文字渐变效果
    • 网站设计中使用渐变效果的25个实例
    • CSS 盒模型
    • CSS压缩大法：技巧与工具
    • 10个非常有用的CSS hack和技术
	
	
	
      
		
      
	9 个评论

        
	
      • 	
        		
        		
          Ethan  发表于May 27, 2011 at 18:14									
        什么时候不用私有属性了，就真的强大了！
        
感谢神飞的分享。
		
        			回复			

      • 	
        		
        		
          百度蕾丝  发表于May 27, 2011 at 19:49									
        前排留名，SEO一下
		
        			回复			
          

        • 	
          		
          		
            神飞  发表于May 27, 2011 at 20:38									
          求年收入过万的蕾丝站，我要买MBP！！！
		
          			回复			
            

          • 	
            		
            		
              丁小倪  发表于Jul 31, 2012 at 13:09									
            MBP是神马？
		
            			回复			
              

            • 	
              		
              		
                狼  发表于Feb 25, 2014 at 11:57									
              MacBook Pro
		
              			回复			







            • 	
              		
              		
                洛阳了了也  发表于Jun 3, 2011 at 14:33									
              开始学前段，来这儿逛逛，拿点东西。^_^…
		
              			回复			

            • 	
              		
              		
                journey  发表于Oct 21, 2011 at 15:56									
              很强大的技术
		
              			回复			

            • 	
              		
              		
                journey  发表于Oct 21, 2011 at 20:06									
              border-radius  下：-webkit-mask 失效
              
代码

              .textGradient1{
              
 border:#333 5px solid; border-radius:5px;
              
 -webkit-mask: -webkit-gradient(linear,0% 0%,0% 100%,from(rgba(222,187,71,1)),to(rgba(36,142,36,0.2)));
              
 background:#F00;}

              前端技术
		
              			回复			

            • 	
              		
              		
                journey  发表于Oct 22, 2011 at 21:54									
              学了你说的方法，发现还能创造出彩色的投影，但是如果字也能渐变就更加好了，是不是加上内发光的方法就可能做到去。。嗯
              
 h1{background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#DEBB47), to(#248F24));font-family:”华文琥珀”; font-weight:bold; color:transparent; -moz-color:#06F;  -webkit-background-clip:text;   font-size:30px;  -webkit-color:transparent; line-height:50px;  margin-left:30px; width:400px; text-shadow:2px -2px #666;
              
 }
              
基于HTML5的(无视firfox)
		
              			回复			


              

	





              

	
              

		发表评论