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

Query SAP multiple database table sizes

Query SAP multiple database table sizes https://www.cnblogs.com/ken-yu/p/12973009.html Item code db02 Here are two approaches, In the first graphical interface, the results of the query data table are displayed in MB, and only one table can be queried at a time. SPACE—Segments—Detailed Analysis—Detailed Analysis  In the pop-up window segment / object, enter the name of the […]