Shulou(Shulou.com)06/01 Report--

Today, I would like to share with you how css3 fonts gradually change color related knowledge points, the content is detailed, logic is clear, I believe most people still know too much about this knowledge, so share this article for your reference, I hope you can get something after reading this article, let's take a look at it.

Method: use background-clip to display the gradient background color in the text area, and the syntax "text element {background-image:linear-gradient (..); background-clip:text;color:transparent;}".

The operating environment of this tutorial: windows7 system, CSS3&&HTML5 version, Dell G3 computer.

Gradual discoloration of css3 font

There is no direct attribute in CSS to set the text gradient, usually the text can only be solid color. However, you can use the background clipping background-clip to make the background color display in the text area. It looks like the text has a gradient.

Custom-made for you to find wonderful

.text {background-image: linear-gradient (# FFCF02, # FF7352); background-clip: text;-webkit-background-clip: text;}

But it doesn't work. The text is still the default color.

The reason is actually very simple, because it is a cropped background, the last display is the background color, colored text is covered on the background, so here you need to set the text color to transparent, which can be achieved with color and-webkit-text-fill-color.

.text {background-image: linear-gradient (# FFCF02, # FF7352); background-clip: text;-webkit-background-clip: text; color: transparent; / * text transparency * /}

So you can see the text gradient effect.

Core content description:

Background-image attribute: set the background image to linear gradient color, learn more about css3 gradient content click here

Background-clip attribute: specifies the drawing area of the background. (we note that the-webkit-, on this property indicates that there is still a compatibility problem with the property, which is not supported by all browsers. There is no text value in W3C, where the text is tailored to text in the background.)

Color property: set the text color to transparent, and then the background color of the face is displayed.

These are all the contents of the article "how to achieve gradual font discoloration in css3". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.