应用CSS3的情况渐变色Text Gradient 建立文本色调渐

日期:2020-10-20 类型:科技新闻 

关键词:在线网页制作,建网页,个人简介网页制作,简单网页,建立网页

考虑到1下,怎样在网页页面中做到相近下列文本渐变色的实际效果?

传统式的完成中,是用1副全透明渐变色的照片遮盖在文本上。实际完成方法可参照 http://www.qianduan.net/css-gradient-text-effect.html 。这类方法优势是照片可控性,因此可完成很繁杂的渐变色实际效果,可是缺陷是照片渐变色色务必与情况色1致,另外损害了电脑鼠标点一下、文本挑选等恶性事件。

改善的方式可使用 CSS3 的情况渐变色 -webkit-gradient ,用1个情况渐变色的 DIV 替代照片。下面是完成实际效果示例,相比以上计划方案优势是不应用照片,减小恳求量和总流量,可是针对以上缺陷,依然没法处理。

有木有完善的处理计划方案呢?

下列详细介绍应用 -webkit-mask 遮罩的计划方案来完成文本渐变色,彻底防止了以上计划方案的不够。下面是完成的完善实际效果图:

如今让大家刚开始 CSS3 Text Gradient 之旅。

1、搭建 HTML 內容和基础款式

大家应用1个 H1 标识包裹1个 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: ⑶px 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: ⑶px 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、渐变色为此外1种色调

由于 -webkit-gradient 具体上是依照照片的方法开展解决的,因此大家不可以根据设定文本色调为渐变色来完成文本色调渐变色为此外1种色调的实际效果(不信的话你能够试试)。

因此大家要结构1个伪元素,內容和大家的文字1样,应用伪元素的缘故是防止再加上1个一样內容的标识导致编码冗余:

拷贝编码
编码以下:

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特性将两个文字重合在1起:

拷贝编码
编码以下:

h1 {
position: relative;
font-family: Segoe, Verdana, sans-serif;
font-size: 100px;
line-height: 100px;
text-shadow: ⑶px 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: ⑶px 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、加上情况

这类完成方法的优点是大家能够自定情况,彻底不会受到渐变色色调的危害。比如大家能够为文本加上1副情况,实际效果以下:

很棒的实际效果,并不是吗:)

5、别的

CSS3 mask 的详尽信息内容能够参照 Webkit.org 的 文章内容 。