小tip:CSS3下的渐变文字效果实现——张鑫旭
by zhangxinxu from http://www.zhangxinxu.com
本文地址:http://www.zhangxinxu.com/wordpress/?p=1601
一、方法一:借助mask-image属性
可以狠狠地点击这里:CSS3下的渐变文字效果方法一demo
如果您手头上的浏览器是Chrome或是Safari,则您可以在demo页面中看到类似下面的效果:
相应的HTML代码如下:
- <h2 class="text-gradient" data-text="天赐美妞">天赐美妞</h2>
与HTML相对应的CSS代码如下:
- .text-gradient {
- display: inline-block;
- font-family: '微软雅黑';
- font-size: 10em;
- position: relative;
- }
- .text-gradient[data-text]::after {
- content: attr(data-text);
- color: green;
- position: absolute;
- left: 0;
- z-index: 2;
- -webkit-mask-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#ff0000), to(rgba(0, 0, 255, 0)));
- }
从CSS代码可以看出,效果的实现除了“content内容生成技术”以外,主要是使用了mask-image
属性,内容则是“webkit核心浏览器下的渐变”了。
二、方法二:background-clip + text-fill-color下的实现
您可以狠狠地点击这里:CSS3下的渐变文字效果方法二demo
如果您手头上的浏览器是Chrome或是Safari,则您可以在demo页面中看到类似下面的效果:
此处实现相对上面要简单些,HTML代码如下:
- <h2 class="text-gradient">天赐美妞</h2>
与HTML相对应的CSS代码如下:
- .text-gradient {
- display: inline-block;
- color: green;
- font-size: 10em;
- font-family: '微软雅黑';
- background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(rgba(0, 128, 0, 1)), to(rgba(51, 51, 51, 1)));
- -webkit-background-clip: text;
- -webkit-text-fill-color: transparent;
- };
CSS代码中关键有用的其实就是最后三行:
- background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(rgba(0, 128, 0, 1)), to(rgba(51, 51, 51, 1)));
- -webkit-background-clip: text;
- -webkit-text-fill-color: transparent;
此方法虽然使用的CSS属性相对多些,但是结构简单,易于控制,颜色的选取与控制也更精确,理解上也更容易理解。我个人是推荐使用方法二的。
三、结语
由于目前text-fill-color
与mask-image
属性貌似就webkit核心的浏览器支持,所以两个demo页面只能在Chrome浏览器或是Safari浏览器下才能看到渐变效果。Firefox浏览器下纯色,IE下就更不用说了。
但是,文字渐变本身就是装饰性的功能,所以,本着渐进增强的原则,我们在实际项目中其实是可以大胆使用的。在不影响原来功能基础上,几行CSS代码,让占有率愈来愈高的Chrome浏览器下有更好的视觉体验效果,何乐而不为呢?
就这些。感谢阅读。参考文章:Quick Tip: Nonintrusive CSS Text Gradients
原创文章,转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]
本文地址:http://www.zhangxinxu.com/wordpress/?p=1601
(本篇完)
小tip:CSS3下的渐变文字效果实现——张鑫旭的更多相关文章
- CSS3下的渐变文字效果实现
如下,第一种方法已实践 一.方法一:借助mask-image属性 可以狠狠地点击这里:CSS3下的渐变文字效果方法一demo 如果您手头上的浏览器是Chrome或是Safari,则您可以在demo页面 ...
- 小tip: CSS后代选择器可能的错误认识——张鑫旭
一.关于类选择器的一个问题 假设有下面一个面试题,CSS代码如下: .red { color: red; } .green { color: green; } HTML如下: <div clas ...
- 好吧,CSS3 3D transform变换,不过如此!——张鑫旭
一.写在前面的秋裤 早在去年的去年,我就大肆介绍了2D transform相关内容.看过海贼王的都知道,带D的家伙都不是好惹的,2D我辈尚可以应付,3D的话,呵呵,估计我等早就在千里之外被其霸气震晕了 ...
- 使用CSS3改变文本选中的默认颜色——张鑫旭
关于浏览器文字选中颜色 以我的系统举例(xp 默认主题),浏览器上页面文字选中后默认的背景色是一种蓝色, 不同浏览器的颜色有些许差异,但大致相同,文字颜色也近乎白色,如下图所示,截自Firefox3. ...
- [转] HTML5终极备忘大全(图片版+文字版)---张鑫旭
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1544 一.前言兼图片 ...
- [转] 小tip: 使用CSS将图片转换成模糊(毛玻璃)效果 ---张鑫旭
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=3804 去年盛夏之时, ...
- 小tip:FireFox下文本框/域百分比padding bug解决——张鑫旭
一.问题描述 我是流体布局控,经常会遇到文本框以及文本域宽度100%自适应显示的情况. 如下效果图: 在窄屏下,上面的文本框宽度也要跟着外部宽度变小. 难点对于文本框或者文本域,光标最好距离左侧边缘有 ...
- 小tip:巧用CSS3属性作为CSS hack——张鑫旭
一.开篇小问题 题目:实现类似下图的宽度自适应效果,IE9+,FireFox,Chrome,Opera等使用CSS3实现,IE6~8浏览器使用图片实现. 计时思考…… 二.思考中 ————- 假设这是 ...
- CSS和JS两种颜色渐变文字效果代码
js实现颜色渐变文字效果代码: <!-- js颜色渐变色文字 --> <div id="moml"> <div style="text-al ...
随机推荐
- Storm一致性事物
Storm是一个分布式的流处理系统,利用anchor和ack机制保证所有的tuple都被处理成功.如果tuple出错,则可以被重传,但是如何保证出错的tuple只被处理一次呢?换句话说Storm如何保 ...
- 五:MyBatis学习总结(五)——实现关联表查询
一.一对一关联 1.1.提出需求 根据班级id查询班级信息(带老师的信息) 1.2.创建表和数据 创建一张教师表和班级表,这里我们假设一个老师只负责教一个班,那么老师和班级之间的关系就是一种一对一的关 ...
- avalon的使用与总结
avalon是前端MVVM框架,将所有前端代码彻底分成两部分,视图的处理通过绑定实现(angular有个更炫酷的名词叫指令),业务逻辑则集中在一个个叫VM的对象中处理.我们只要操作VM的数据,它就自然 ...
- day 53 Django form 组件 autu 组件
https://github.com/Endless-Clould/homework/tree/master/auto_zujian ---恢复内容开始--- 前情提要: Django 组件 的 fo ...
- 【LOJ 2542】【PKUWC2018】 随机游走(最值反演 + 树上期望dp)
哇我太菜啦555555 不妨钦定我们需要访问的点集为$S$,在$S$已知的情况下,我们令$f(x) $表示从$x$走到点集$S$中任意一点的期望步数. 若$x∈S$,则显然$f(x)=0$,否则$f[ ...
- Monkey学习笔记<三>:Monkey脚本编写
我们都知道Monkey是向手机发送伪随机事件流,但是有时候我们需要实现特定的事件流,这时候我们可以用Monkey脚本来实现. 通过对monkey的API研究发现,我们可以通过-f这个参数来实现monk ...
- JS实现一个基于对象的链表
JS实现一个基于对象的链表 /*JS实现一个基于对象的链表*/ function Node(element){ this.element = element;//节点存储的元素 this.next = ...
- (转) python学习笔记6--fraction
原文:https://blog.csdn.net/lemonwyc/article/details/37592883 fraction模块提供有关有理数的算术表达和计算,实际上就是分数的表达和计算.p ...
- photoshop切图介绍 && photoshop下载与破解
第一部分:界面设置 1.点击“文件-新建”(或者ctrl+n)打开一个新建对话框.名称可随意填写.“预设”设置为自定,“宽度”一般选择1920,“单位”选为像素.“高度”可选择为2000,“单位”选为 ...
- Check类的validate方法解读
此方法的实现如下: public void validate(JCTree tree, Env<AttrContext> env, boolean checkRaw) { Validato ...