CSS3 文字渐变
浏览:1930次 出处信息
之前,我们有发表过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)));}
不足:这个方法是利用蒙板的透明度来实现的,而蒙板的颜色并不能用于渐变中,渐变色要依赖字体的颜色――也就是说,只支持单色渐变。
2.-webkit-background-clip:text
严格来说,这个方法需要几个属性组合,包括color/-webkit-text-fill-color和背景渐变:
.textGradient2{background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#DEBB47), to(#248F24)); color: transparent; /*-webkit-text-fill-color: transparent;*/ -webkit-background-clip: text;}
要点:
- color/-webkit-text-fill-color的目的是一样的,就是让文字透明,因为其它浏览器不支持下面的属性值,所以这里建议采用后者,color属性会让文字在其它浏览器中透明掉。
- -webkit-background-clip属性的text值是webkit独有的,gecko、opera和IE9虽然也支持这个属性,但是并不支持text值,这是关键所在。
- 到现在大家应该能看到这个方法的原理是将文字挖空,从而露出背景色。所以背景色在这里是关键,而背景色的渐变可以使用任何颜色,所以,这个方法支持真正的彩色渐变。
这里是一个简单的在线演示,预览效果:
当然,结合-webkit-text-stroke属性,你可以创建更酷的CSS渐变效果。
当然,如果你有其它浏览器中实现纯CSS渐变的方法,欢迎分享 :)
建议继续学习:
- 理解CSS3线性渐变 (阅读:2296)
- 渐变背景上的内容垂直居中 (阅读:2264)
- webkit对于CSS3渐变样式语法的更新 (阅读:1697)
- CSS Gradient详解 (阅读:1399)
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
扫一扫订阅我的微信号:IT技术博客大学习
<< 前一篇:重置还是不重置-这是个CSS问题
后一篇:圆角头像的重构优化 >>
文章信息
- 作者:神飞 来源: 前端观察
- 标签: 渐变
- 发布时间:2011-05-28 22:16:55
近3天十大热文
- [65] Oracle MTS模式下 进程地址与会话信
- [65] Go Reflect 性能
- [64] 如何拿下简短的域名
- [59] android 开发入门
- [59] IOS安全–浅谈关于IOS加固的几种方法
- [58] 图书馆的世界纪录
- [58] 【社会化设计】自我(self)部分――欢迎区
- [53] 视觉调整-设计师 vs. 逻辑
- [47] 界面设计速成
- [46] 读书笔记-壹百度:百度十年千倍的29条法则