CSS3下的渐变色文本实际效果完成示例

日期:2020-09-19 类型:科技新闻 

关键词:html网页制作,php网页制作,网页设计稿,网页编辑工具,学生网页设计模板

1、方式1:依靠mask-image特性

假如您手头上的访问器是Chrome或是Safari,则您能够在demo网页页面中看到相近下面的实际效果:

方式1下的文本渐变色实际效果

相应的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关键访问器下的渐变色”了。

2、方式2:background-clip + text-fill-color下的完成

假如您手头上的访问器是Chrome或是Safari,则您能够在demo网页页面中看到相近下面的实际效果:

方式2下的文本渐变色实际效果

此处完成相对性上面要简易些,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编码中重要有效的实际上便是最终3行:

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特性相对性多些,可是构造简易,易于操纵,色调的选择与操纵也更精准,了解上也更非常容易了解。我本人是强烈推荐应用方式2的。

3、结语

因为现阶段text-fill-color与mask-image特性貌似就webkit关键的访问器适用,因此两个demo网页页面只能在Chrome访问器或是Safari访问器下才可以看到渐变色实际效果。Firefox访问器下单色,IE下就更无需说了。

可是,文本渐变色自身便是装饰设计性的作用,因此,本着渐进提高的标准,大家在具体新项目中实际上是能够胆大应用的。在不危害原先作用基本上,几行CSS编码,让占据率越来越高的Chrome访问器下有更好的视觉效果体验实际效果,何乐而不为呢?

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。