The designer girl delivered the design draft in the morning. At first glance, the color of the text on it is gradient, and the content of the text is dynamic, that is, We cannot use pictures instead. As a responsible man, we must never say no.
It reminds me that CSS3 is good at color gradients. So I quickly checked the document to see if CSS3 has any relevant solutions for the realization of font color gradients.
I tried it, and the powerful CSS3 provides us with relevant features, which allows us to easily realize font color gradients, see the following code:
<h1 class='beauty-font' text=< span >'webFront-end tutorial'>
web span>Front-end tutorial
</h1>
<style>< br> .beauty-font{
display: inline-block;
font-size: 80px;
position: relative span>;
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< span >,0,0.1)),
tototo span>(rgba(0,0,00 span>,0.8)));
);
}
< /style>
The final effect is as follows:
(rendering)
Let's learn about the implementation of font gradients in detail. The core features used here are: content content generation technology and gradient mask.
1. content generation technology
Speaking of the pseudo class :after you must be familiar with it, we will often use it in daily development. We often use it like this:
.demo:after{
content: 'webFront-end tutorial ';
}
But few people know that in addition to using text, the value of the content attribute can also directly access some attribute values of the read tag. The method used is: attr() , see the following code:
<div class=< span >'demo' text='webFront-end tutorial'>< /span></div>
. demo:after{
content : attr(text);
}
The above writing method can also assign a value to the content attribute: "web front-end tutorial".
2. Gradient mask
The realization of the gradient mask mainly depends on the combination of -webkit-mask and -webkit-gradient of CSS3.
-webkit-mask is mainly used to add a mask to an element. The mask can be a transparent png image or a CSS3 gradient effect. Here we use CSS3's -webkit-gradient to achieve the gradient effect.
The font color gradient effect you see above is achieved by using these two attributes. I will split the effect of the realization, and everyone will understand it at a glance. As shown below:
As you can see, the final font gradient effect is actually the effect of superimposing two fonts: original element + mask. Here I will explain to you the principle of font gradients. Interested students can implement one by themselves. The syntax of CSS3 will not be expanded here. If you are not familiar with the specific syntax, you can check the relevant documents. I believe you can easily get started.
But these CSS3 properties are not yet supported by all browsers. But I believe that these attributes will be supported by other browsers in the near future. Currently, in browsers that do not support these attributes, we can only use graceful degradation.
Hot Articles
Original Tutorial: "ECMAScript 6 Tutorial"
Additional Exercises:ECMAScript 6 Tutorial Test Questions
Original tutorial: "Vue2.0 Basic Tutorial"
Original tutorial: "Vue2.0 Advanced Tutorial"
Additional exercises: "Vue2.0 Basic Tutorial" test questions
Workplace insights: span> to eat with food, not to mention liking Feeling lost:I've tried so hard, but I'm still lost Salary: With such a small salary, can you recruit people? Training background:I am a training programmer Training fee: Is it worth spending 18,000 yuan to participate in front-end training? Training resume: What should I do if the resume is packaged into 1-2 years of experience? Funny slang:Internet company slang, so funny Professional Freedom: 6 Stages of Professional Freedom for Programmers Workplace image: In the eyes of others, programmers look like this
Articles are uploaded by users and are for non-commercial browsing only. Posted by: Lomu, please indicate the source: https://www.daogebangong.com/en/articles/detail/Designer%20girl%20asked%20Font%20color%20gradient%20can%20you%20achieve%20it.html
支付宝扫一扫 
评论列表（196条）
测试