CSS Instance Tutorial: using CSS3 Implementation to implement text gradient method

Article Introduction: we have published a CSS text gradient, but in fact it's not a purely CSS-based gradient, it needs a translucent gradient png picture. Today we'll introduce two ways to implement text using CSS3.

Before, we have published a CSS text gradient , but in fact it is not a purely CSS-based gradient, it needs a translucent gradient png picture. Today we'll introduce two ways to implement text using CSS3. Well, only WebKit browser support, please temporarily ignore other browsers.

1.-webkit-mask

In thefuture of CSS: some of the experimental CSS properties , we mentioned this attribute, compared to Firefox can only use SVG to do mask,webkit is a lot more flexible, picture and CSS3 gradient can be. It was initially noted that the effect was in the Pjblog of Shun's son:

. textgradient1{
-webkit-mask:-webkit-gradient (linear,0% 0%,0% 100%,from (Rgba
		)), to ( RGBA (36,142,36,0.2));
}

Insufficient: This method is implemented with the transparency of the mask, and the color of the mask is not used in the gradient, from the example you can see that the settings of the gradient is ignored, the only useful alpha value. The gradient here depends on the color of the font-that is, only monochrome gradients are supported.

2.-webkit-background-clip:text

Strictly speaking, this method requires several attribute combinations, including color/-webkit-text-fill-color and background gradients:

. Textgradient2{background:-webkit-gradient (linear,
		0%
		0,
		0%
		100%, from (#DEBB47), to (#248F24));
Color:
		transparent;
/*-webkit-text-fill-color:transparent;*/
-webkit-background-clip:
		text;

Points:

• The purpose of Color/-webkit-text-fill-color is to make text transparent because other browsers do not support the following attribute values, so the latter is recommended here, and the Color property makes the text transparent in other browsers.
• The text value of the-webkit-background-clip property is unique to WebKit, and Gecko, opera, and IE9 support this property, but they do not support the text value, which is the key.
• You should now be able to see this method by hollowing out the text to reveal the background color. So the background color is key here, and the background color gradient can use any color, so this method supports true color gradients.

Here is a simple online demo that previews the effect:

Of course, with the-webkit-text-stroke attribute, you can create a cooler CSS gradient effect.

Of course, if you have other browsers to implement a pure CSS gradient method, welcome to share:)