CSS3 implements gradient text effect

This article mainly shares with you CSS3 to achieve gradient text effect. We mainly share with you two methods, hoping to help you.

1. Method 1: Use the mask-image attribute

method to create a text gradient effect

The corresponding HTML code is as follows:

<h2 class="text-gradient" data-text="天赐美妞">天赐美妞</h2>

The CSS code corresponding to HTML is as follows:

.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)));
}

It can be seen from the CSS code that the effect is achieved In addition to "content content generation technology", the mask-image attribute is mainly used, and the content is "gradient under the webkit core browser".

2. Method 2: Implementation under background-clip + text-fill-color

Text gradient effect under method 2

Here The implementation is simpler than the above. The HTML code is as follows:

<h2 class="text-gradient">天赐美妞</h2>

The CSS code corresponding to HTML is as follows:

.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;
};

The most useful thing in the CSS code is actually the last three lines:

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;

Although this method uses relatively more CSS properties, it has a simple structure and is easy to control. Selection and control are also more precise and easier to understand. I personally recommend using method two.

3. Conclusion

Since the current text-fill-color and mask-image attributes seem to be supported by webkit core browsers, the two demo pages can only be The gradient effect can only be seen in Chrome or Safari. Solid color under Firefox browser, not to mention under IE.

However, text gradient itself is a decorative function, so based on the principle of progressive enhancement, we can actually use it boldly in actual projects. Without affecting the original functions, a few lines of CSS code can provide a better visual experience under the increasingly popular Chrome browser. Why not?

Related recommendations:

js implementation of obtaining color gradient code

javascript calculation gradient color example sharing

css3 linear gradient entry example sharing

The above is the detailed content of CSS3 implements gradient text effect. For more information, please follow other related articles on the PHP Chinese website!