Detailed explanation of two ways to achieve text gradient color using pure CSS-CSS Tutorial-php.cn

Detailed explanation of two ways to achieve text gradient color using pure CSS

青灯夜游

Release： 2021-04-28 08:52:01

forward

3759 people have browsed it

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.

Detailed explanation of two ways to achieve text gradient color using pure CSS

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

Detailed explanation of two ways to achieve text gradient color using pure CSS

Code

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <style>
 
    span {
        background: linear-gradient(to right, red, blue);
        -webkit-background-clip: text;
        color: transparent;
    }
    </style>
</head>

<body>
        <span>前端简单说</span>
</body>
</html>

Copy after login

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 for background-image, not background-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;

Detailed explanation of two ways to achieve text gradient color using pure CSS

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 write color: transparent; to make the text transparent, which means that the background color behind it will be displayed.

Method 2

Rendering

Detailed explanation of two ways to achieve text gradient color using pure CSS

Code

<!doctype html>
<html>
<head>
<meta charset="UTF-8" />

<style type="text/css">
    h1{
        position: relative;
        color: yellow;
    }
    h1:before{
        content: attr(text);
        position: absolute;
        z-index: 10;
        color:pink;
        -webkit-mask:linear-gradient(to left, red, transparent );
    }
</style>
</style>
</head>

<body>
    <h1 text="前端简单说">前端简单说</h1>
</body>

</html>

Copy after login

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
<h1 tt="Front-end in brief">Front-end in brief </h1>
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

Detailed explanation of two ways to achieve text gradient color using pure CSS

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!