小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 ...
随机推荐
- python3异常处理 try
一. 简介 在编程过程中为了增加友好性,在程序出现Bug时一般不会直接将错误信息展示给用户,而是提供一个友好的输出提示. 二. 使用 1.异常基础 常用结构: try: pass except Exc ...
- subtext 安装PythonIDE -Anaconda
安装PythonIDE -Anaconda 打开subtext,通过快捷键 cmd+shift+P 打开 Package Control 来安装其他的插件了. 输入 install 然后你就能看见屏幕 ...
- 剑指offer四十二之和为S的两个数字
一.题目 输入一个递增排序的数组和一个数字S,在数组中查找两个数,是的他们的和正好是S,如果有多对数字的和等于S,输出两个数的乘积最小的. 二.思路 数列满足递增,设两个头尾两个指针i和j,若ai + ...
- wordpress常用标记
博客地址:bloginfo('url'); 博客名称:bloginfo("name"); 博客描述:bloginfo("decription"); 文章内容: ...
- Maven 学习笔记(一)
什么是 maven? 对于已经使用过 maven 的用户来说 maven 就是一个架构工具,使用它可以将代码构建成一个可发布的工具.当然也有人会说maven是一个项目管理的工具.当然各有各的说法,那么 ...
- Leetcode 762. Prime Number of Set Bits in Binary Representation
思路:动态规划.注意1024*1024>10^6,所以质素范围是(0,23). class Solution { public int countPrimeSetBits(int L, int ...
- ABP实战--修改语言配置XML至Json
从ABP官网下载的Zero的多语言配置默认是使用XML文件的,实际使用中XML是没有Json简洁明了的,所以我们将其修改为Json格式. 修改MyLocalizationConfigurer.cs文件 ...
- spring AOP 之四:@AspectJ切入点标识符语法详解
@AspectJ相关文章 <spring AOP 之二:@AspectJ注解的3种配置> <spring AOP 之三:使用@AspectJ定义切入点> <spring ...
- JSON必知必会
知识点比较杂,简单的以列表形式罗列知识点 1.json是基于javascript对象字面量的,所以他们看起来很像.但是js对象字面量不需要给名称-值对中的名称两边加上双引号.而在JSON中,却是必要的 ...
- rails常用验证方法
validates_presence_of :login, :message => "用户名不能为空!" validates_length_of ...