This article introduces two ways to use pure CSS to achieve text gradient color. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

Explanation

---

The focus this time is on two attributes,

• background attribute

• mask attribute

These two attributes are the key to the two implementation methods.

Method 1

---

Rendering

Code

     
  前端简单说  

There is not much code, let’s take a look,
background: linear-gradient(to right, red, blue);This line It sets the gradient color for the background. Please note here that this is an abbreviation. In fact, it sets the gradient color forbackground-image, notbackground-color, but the value of the background image. It is a gradient color. If you don’t know the gradient color, go here to see it.
CSS3 Gradient (Gradients)

-webkit-background-clip: text;This line will be mentioned , background-clip attribute, let’s take a look at the description on W3Cschool

The background-clip attribute specifies the drawing area of the background

Syntax
background -clip: border-box|padding-box|content-box;

There is no mention of the value text above. Seeing the previous prefix, you should It can also be imagined that it has compatibility issues, and it is not currently supported by all browsers.

The value of text means that the text in the block is used as the cropping area to be cropped outward. The background of the text is the background of the block, and the area outside the text will be cropped.

So, we finally writecolor: transparent;to make the text transparent, which means that the background color behind it will be displayed.

Method 2

---

Rendering

Code

nbsp;html>   
前端简单说

There is not much code, let’s briefly talk about it,

:before selector inserts content before the selected element.
Use the content attribute to specify the content to be inserted.

content value attr is used to get the attribute value, content:attr(attribute name);

content: attr(text);can get the element text attribute. The text attribute here is a custom attribute. You can also add a tt attribute to the element, like this

Front-end in brief

Then the content attribute is written like this,content: attr(tt);It will also work.

Okay, let’s continue talking about the focus of the second method, the mask attribute, because we have already written an article introducing the mask attribute before.
Let’s briefly talk about the mask in CSS—make good use of mask-image
I won’t introduce it in detail here. Friends who want to know more about it can read the above article, which will definitely be helpful to you.

Simply put, the mask attribute allows a certain part of the element to be displayed or hidden.
We can understand the principle of the second method by looking at the picture

Summary

This time These two methods should be easy to understand. I hope it will be helpful to everyone.

For more programming-related knowledge, please visit:Introduction to Programming! !

The above is the detailed content of Detailed explanation of two ways to achieve text gradient color using pure CSS. For more information, please follow other related articles on the PHP Chinese website!