考虑一下,如何在网页中达到类似以下文字渐变的效果?
传统的实现中,是用一副透明渐变的图片覆盖在文字上。具体实现方式可参考
http://www.qianduan.net/css-gradient-text-effect.html
。这种方式优点是图片可控,所以可实现很复杂的渐变效果,但是缺点是图片渐变色必须与背景色一致,同时损失了鼠标点击、文字选择等事件。
改进的方法可以使用
CSS3
的背景渐变
-webkit-gradient
,用一个背景渐变的
DIV
代替图片。下面是实现效果示例,相比以上方案优点是不使用图片,减小请求量和流量,但是对于以上缺点,仍然无法解决。
有没有完美的解决方案呢?
以下介绍使用
-webkit-mask
遮罩的方案来实现文字渐变,完全避免了以上方案的不足。下面是实现的完美效果图:
现在让我们开始
CSS3 Text
Gradient
之旅。
1、
构建
HTML
内容和基本样式:
我们使用一个
H1
标签包裹一个
A
标签:
view plaincopy to clipboardprint?
-
<h1><a href=
"#"
mce_href=
"#"
>Jiangyujie</a></h1>
样式定义如下,我们使用
text-shadow
为文字添加阴影:
view plaincopy to clipboardprint?
-
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
可以设置为普通颜色、线性渐变、径向渐变或者图片。
代码如下:
view plaincopy to clipboardprint?
-
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
实际上是按照图片的方式进行处理的,所以我们不能通过设置文字颜色为渐变来实现文字颜色渐变为另外一种颜色的效果(不信的话你可以试试)。
所以我们要构造一个伪元素,内容和我们的文本一样,使用伪元素的原因是避免再添加一个同样内容的标签造成代码冗余:
view plaincopy to clipboardprint?
-
h1:after {
-
content: "Jiangyujie"
;
-
color: #000;
-
text-shadow: 3px 3px 1px #600;
-
}
然后我们通过position属性将两个文本重叠在一起:
view plaincopy to clipboardprint?
-
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
的
文章
。
分享到:
相关推荐
纯css3 gradient颜色渐变立体文字特效代码
使用CSS3 的背景渐变 -webkit-gradient ,用一个背景渐变的 DIV 代替图片。下面是实现效果示例,相比以上方案优点是不使用图片,减小请求量和流量
纯css3 gradient属性制作6种渐变色的按钮样式
网页模板——Vue.js圆形CSS3颜色渐变色拾取器
线性渐变是指两个或者两个以上颜色之间显示平稳的过渡的动画效果,我们一般在css3中使用新增的gradients属性实现这个效果,我们根据渐变的方向分为从上至下、从右至左和对角渐变,其中默认的方向是从上向下渐变。...
15种纯CSS3基于gradient属性制作的渐变颜色色板配色代码,带颜色参数,可在CSS样式自定义配置渐变颜色配色。
今天这篇文章我们在一起来看看 CSS3 中实现渐变效果的 Gradient 属性的具体用法。在以前,渐变效果和阴影、圆角效果一样都是做成图片,直接编写 CSS 代码就可以实现。
CSS3径向渐变 径向渐变 01 径向渐变 CSS3径向渐变是圆形或椭圆形渐变。颜色不再沿着一条直线轴变化,而是从一个起点朝所有方向混合。 background-image:radial-gradient(渐变形状 圆心位置,颜色值1,颜色值2...,颜色...
CSS 设计指南学习小结
在web前端开发过程中,UI设计师经常会设计一些带渐变文字的设计图,在以前我们只能用png的图片来代替文字,今天可以实现使用纯CSS实现渐变文字了。下面就介绍3中实现方式供大家参考! 基础样式: .gradient-text{...
用于生成边框渐变的 Tailwind CSS 插件可以与圆形实用程序类一起使用。 该插件基于 。 看看它的实际效果: : 要求 此插件需要 Tailwind CSS 1.2 或更高版本。 建议使用新的 2.x 版本。 安装 npm install ...
本篇文章主要介绍了css3实现文字扫光渐变动画效果的示例,分享给大家,具体如下: 利用css3这个属性(背景剪裁): background-clip: border-box || padding-box || context-box || no-clip || text 本次用到的就是:...
目录1. CSS3渐变1.1 线性渐变1.2 径向渐变1.3 重复线性渐变1.4 重复径向...CSS3 Gradient 分为线性渐变(linear)和径向渐变(radial)。由于不同的渲染引擎实现渐变的语法不同 1.1 线性渐变 语法: background: linear-
随机尾风梯度生成器 :rainbow:运行项目yarn install安装... 支持所有Tailwind CSS渐变方向。 强度300 颜色的强度。 支持从100到900值。 班级名称random-gradient 仅适用于/css 。 包含样式的类的名称。例子 https://ra
前段时间整理了CSS3中的渐变Gradient、透明度RGBA、边框圆角box-radius三个新属性的使用方法,这几次继续整理了有关于CSS3的text-shadow的使用方法,需要了解的朋友可以详细参考下
CSS3 Gradient分为linear-gradient(线性渐变)和radial-gradient(径向渐变)。线性渐变在Webkit下的应用 CSS Code复制内容到剪贴板 -webkit-linear-gradient( [ || ,]? , [, ]* )//最新发布书写语法 第...
—–线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向 —–径向渐变(Radial Gradients)- 由它们的中心定义 CSS3 线性渐变 为了创建一个线性渐变,你必须至少定义两种颜色结点。颜色结点即你想要