早上设计师妹子把设计稿交付过来,乍一看,上面的文字颜色渐变的,而且文字内容是动态的,也就是我们无法用图片来代替。 作为一个有责任担当的汉子,坚决不能说不行。
想起了CSS3 擅长做颜色渐变。所以赶紧查看了一下文档,看看CSS3在对字体颜色渐变的实现上有没有相关的方案。
我试了一下,强大的CSS3给我们提供相关的特性,能让我们很方便地就实现字体颜色渐变,看下面这段代码:
<h1 class='beauty-font' text='web前端教程'>
web前端教程
</h1>
<style>
.beauty-font{
display: inline-block;
font-size: 80px;
position: relative;
color: red;
}
.beauty-font:after {
content: attr(text);
position: absolute;
left: 0;
z-index: 2;
color:black;
-webkit-mask: -webkit-gradient(
linear,
left top,
right top,
from(rgba(0,0,0,0.1)),
to(rgba(0,0,0,0.8)));
);
}
</style>
最后实现的效果如下:
(效果图)
我们来详细学一下字体渐变的实现,这里使用到的几个核心特性有:content内容生成技术和渐变蒙版。
1.content内容生成技术
说起伪类 :after 大家一定不陌生,在日常开发中我们会经常用到它。我们经常会这样使用:
.demo:after{
content: 'web前端教程';
}
但很少人知道,content属性的值除了使用文本之外,还可以直接访问读取标签的一些属性值。使用的方法是: attr() ,参见如下的代码:
<div class='demo' text='web前端教程'></div>
.demo:after{
content: attr(text);
}
以上这种写法同样能给content属性赋值:“web前端教程”。
2.渐变蒙版
渐变蒙版的实现主要是靠CSS3的 -webkit-mask 和 -webkit-gradient 配合着使用。
-webkit-mask 主要是用来给一个元素添加一个蒙版。蒙版可以是透明的png图片也可以是CSS3的渐变效果。在这里我们使用CSS3的 -webkit-gradient 来实现渐变效果。
大家上面看到的字体颜色渐变的效果就是用这两个属性来实现的。我把实现的效果拆分一下,大家就一目了然。如下图:
大家看到最后的字体渐变效果,其实是两个字体叠加出来的效果:原始元素+蒙版。在这里给大家讲解了字体实现渐变的原理,有兴趣的同学可以自己实现一个,CSS3的语法就不在这里展开了,具体的语法不熟悉的话可以翻查相关文档,相信大家很容易就能上手。
不过这些CSS3属性还没有被所有浏览器所支持。但相信在不久的将来这些属性都会被其他浏览器所支持,目前在还没有支持这些属性的浏览器中,我们只能采用优雅降级的方式处理。
热门文章
原创教程:《ECMAScript 6 教程》
附加习题:《ECMAScript 6 教程》测试题
原创教程:《Vue2.0基础教程》
原创教程:《Vue2.0进阶教程》
附加习题:《Vue2.0基础教程》测试题
职场感悟:混口饭吃,谈不上喜欢
感到迷茫:我很努力,但依然很迷茫
薪资待遇:那么点工资,能招到人吗?
培训出身:我是一个培训出身的程序员
培训费用:花1.8万参加前端培训,值吗?
培训简历:简历包装成1-2年经验,咋办?
搞笑黑话:互联网公司黑话,搞笑到爆
职业自由:程序员职业自由的6个阶段
职场形象:在别人眼里,程序员是这样的
文章为用户上传,仅供非商业浏览。发布者:Lomu,转转请注明出处: https://www.daogebangong.com/articles/detail/Designer%20girl%20asked%20Font%20color%20gradient%20can%20you%20achieve%20it.html
评论列表(196条)
测试