使用CSS3的背景渐变Text Gradient 创建文字颜色渐变


Posted in HTML / CSS onAugust 19, 2014

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

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

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

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

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

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

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

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

<h1><a href= "#" mce_href= "#" >Jiangyujie</a></h1>

<h1><a href="#" mce_href="#">Jiangyujie</a></h1>

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

复制代码
代码如下:

h1 {
font-family: Segoe UI, Verdana, sans-serif;
font-size: 100px;
line-height: 100px;
text-shadow: -3px 0 4px #006;
}
h1 a:link,
h1 a:visited,
h1 a:hover,
h1 a:active {
color: #d12;
text-decoration: none;
}
复制代码
代码如下:

h1 {
font-family: Segoe UI, Verdana, sans-serif;
font-size: 100px;
line-height: 100px;
text-shadow: -3px 0 4px #006;
}
h1 a:link,
h1 a:visited,
h1 a:hover,
h1 a:active {
color: #d12;
text-decoration: none;
}

基本效果如下:

2、添加渐变效果

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

代码如下:

复制代码
代码如下:

h1 a:link,
h1 a:visited,
h1 a:hover,
h1 a:active {
color: #d12;
text-decoration: none;
-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
}
复制代码
代码如下:

h1 a:link,
h1 a:visited,
h1 a:hover,
h1 a:active {
color: #d12;
text-decoration: none;
-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
}

效果如下所示:

3、渐变为另外一种颜色

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

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

复制代码
代码如下:

h1:after {
content: "Jiangyujie" ;
color: #000;
text-shadow: 3px 3px 1px #600;
}
复制代码
代码如下:

h1:after {
content: "Jiangyujie";
color: #000;
text-shadow: 3px 3px 1px #600;
}

然后我们通过position属性将两个文本重叠在一起:
复制代码
代码如下:

h1 {
position: relative;
font-family: Segoe, Verdana, sans-serif;
font-size: 100px;
line-height: 100px;
text-shadow: -3px 0 4px #006;
}
h1 a:link,
h1 a:visited,
h1 a:hover,
h1 a:active {
position: absolute;
text-decoration: none;
top: 0;
z-index: 2;
color: #d12;
-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
}
复制代码
代码如下:

h1 {
position: relative;
font-family: Segoe, Verdana, sans-serif;
font-size: 100px;
line-height: 100px;
text-shadow: -3px 0 4px #006;
}
h1 a:link,
h1 a:visited,
h1 a:hover,
h1 a:active {
position: absolute;
text-decoration: none;
top: 0;
z-index: 2;
color: #d12;
-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
}

效果如下图所示:

4、添加背景

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

很棒的效果,不是吗:)

5、其他

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

HTML / CSS 相关文章推荐
CSS3中的Media Queries学习笔记
May 23 HTML / CSS
CSS3 animation实现逐帧动画效果
Jun 02 HTML / CSS
详解CSS透明opacity和IE各版本透明度滤镜filter的最准确用法
Dec 20 HTML / CSS
利用纯CSS3实现动态的自行车特效源码
Jan 20 HTML / CSS
css3动画鼠标放上图片逐渐变大鼠标离开图片逐渐缩小效果
Jan 27 HTML / CSS
HTML5新表单元素_动力节点Java学院整理
Jul 12 HTML / CSS
传统HTML页面实现模块化加载的方法
Oct 15 HTML / CSS
Html5实现单张、多张图片上传功能
Apr 28 HTML / CSS
HTML5的标签的代码的简单介绍 HTML5标签的简介
May 28 HTML / CSS
HTML5之HTML元素扩展(下)—增强的Form表单元素值得关注
Jan 31 HTML / CSS
HTML5视频播放插件 video.js介绍
Sep 29 HTML / CSS
详解h5页面在不同ios设备上的问题总结
Mar 01 HTML / CSS
css3中新增的样式使用示例附效果图
Aug 19 #HTML / CSS
css3 position fixed固定居中问题解决方案
Aug 19 #HTML / CSS
CSS3实现多背景展示效果通过CSS3定位多张背景
Aug 10 #HTML / CSS
CSS3实现圆角、阴影、透明效果并兼容各大浏览器
Aug 08 #HTML / CSS
CSS3制作文字半透明倒影效果的两种实现方式
Aug 08 #HTML / CSS
CSS3 transform的skew属性值图文详解
Jul 21 #HTML / CSS
目前不被任何主流浏览器支持的CSS3属性汇总
Jul 21 #HTML / CSS
You might like
PHP在XP下IIS和Apache2服务器上的安装
2006/09/05 PHP
PHP+redis实现微博的推模型案例分析
2019/07/10 PHP
PHP如何开启Opcache功能提升程序处理效率
2020/04/27 PHP
HR vs ForZe BO3 第二场 2.13
2021/03/10 DOTA
Javascript 设计模式(二) 闭包
2010/05/26 Javascript
关于JQuery($.load)事件的用法和分析
2013/04/09 Javascript
Jquery中LigerUi的弹出编辑框(实现方法)
2013/07/09 Javascript
使用iojs的jsdom库实现同步系统时间
2015/04/20 Javascript
js实现不提交表单获取单选按钮值的方法
2015/08/21 Javascript
AngularJS之依赖注入模拟实现
2016/08/19 Javascript
JavaScript函数表达式详解及实例
2017/05/05 Javascript
深入理解AngularJs-scope的脏检查(一)
2017/06/19 Javascript
详解Vue微信公众号开发踩坑全记录
2017/08/21 Javascript
Nodejs连接mysql并实现增、删、改、查操作的方法详解
2018/01/04 NodeJs
JS简单添加元素新节点的方法示例
2018/02/10 Javascript
JavaScript的console命令使用实例
2019/12/03 Javascript
Antd下拉选择,自动匹配功能的实现
2020/10/24 Javascript
[03:01]完美盛典趣味短片 DOTA2年度最佳&拉胯英雄
2019/12/07 DOTA
Python中多线程thread与threading的实现方法
2014/08/18 Python
Python数据集切分实例
2018/12/08 Python
python使用xlrd模块读取xlsx文件中的ip方法
2019/01/11 Python
Pytorch 多维数组运算过程的索引处理方式
2019/12/27 Python
Anconda环境下Vscode安装Python的方法详解
2020/03/29 Python
Python 如何展开嵌套的序列
2020/08/01 Python
Python importlib模块重载使用方法详解
2020/10/13 Python
建筑工程技术应届生自荐信
2013/09/27 职场文书
个人自我鉴定范文
2013/10/04 职场文书
大一自我鉴定范文
2013/12/27 职场文书
摄影助理岗位职责
2014/02/07 职场文书
《四季》教学反思
2014/04/08 职场文书
文案策划求职信
2014/04/14 职场文书
《青海高原一株柳》教学反思
2014/04/25 职场文书
2015年感恩父亲节活动策划方案
2015/05/05 职场文书
行政上诉状范文
2015/05/23 职场文书
2015年幼儿园中班开学寄语
2015/05/27 职场文书
Python手拉手教你爬取贝壳房源数据的实战教程
2021/05/21 Python