Example of gradual text effect under CSS3

Time:2019-10-19

1. Method 1: use mask image attribute

If your browser is chrome or Safari, you can see the following effects in the demo page:

Method 1 text gradient effect

The corresponding HTML code is as follows:

< H2 class = "text grade" data text = "gifted beauty" > gifted beauty</h2>

The CSS code corresponding to HTML is as follows:

.text-gradient {  
    display: inline-block;
    Font family: 'Microsoft YaHei';
    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 in addition to the “content content generation technology”, the implementation of the effect mainly uses the mask image attribute, and the content is “gradient under the WebKit core browser”.

2. Method 2: implementation under background clip + text fill color

If your browser is chrome or Safari, you can see the following effects in the demo page:

Method 2 text gradient effect

The implementation here is relatively simple. The HTML code is as follows:

< H2 class = "text gradient" > gifted beauty</h2>

The CSS code corresponding to HTML is as follows:

.text-gradient {  
    display: inline-block;
    color: green;
    font-size: 10em;
    Font family: 'Microsoft YaHei';
    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 last three lines are the key to CSS code:


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 more CSS properties, it is simple in structure, easy to control, more accurate in color selection and control, and easier to understand. I personally recommend method 2.

Three, conclusion

At present, the text fill color and mask image attributes seem to be the browser support of WebKit core, so the two demo pages can only see the gradient effect in Chrome browser or Safari browser. Firefox browser under solid color, ie, let alone.

However, text gradient itself is a decorative function, so in line with the principle of gradual enhancement, we can actually use it boldly in actual projects. On the basis of not affecting the original functions, a few lines of CSS code make Chrome browser with higher and higher share have better visual experience effect. Why not?

The above is the whole content of this article. I hope it will help you in your study, and I hope you can support developepaer more.

Recommended Today

Single and multiple buttons are styled with pictures

I’ve always seen people asking how to style and enlarge the buttons of radio buttons and multi buttons? Let’s share an example I did. 1. First make the button into a picture  2.html page Copy code The code is as follows: <!DOCTYPE HTML> <html> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /> <script type=”text/javascript” src=”jquery-1.10.2.min.js”></script> <script type=”text/javascript”> […]