Create a text color gradient using CSS3 (CSS3 text Gradient)

Consider how you can achieve a gradient similar to the following text in your Web page.

The traditional implementation is to use a transparent gradient of the picture overlay on the text. The concrete realization Way can refer to http://www.qianduan.net/css-gradient-text-effect.html. The advantage of this way is that the picture can be controlled, so it can achieve a very complex gradient effect, but the disadvantage is that the image gradient must be consistent with the background color, while the loss of mouse clicks, text selection and other events.

The improved method can use the CSS3 background gradient-webkit-gradient to replace the picture with a DIV with a background gradient. The following is an example of implementation, compared to the advantages of the above scenario is not to use the picture, reduce the volume of requests and traffic, but for these shortcomings, still cannot solve.

Is there a perfect solution?

The following describes the use of the-webkit-mask mask scheme to achieve the text gradient, completely avoid the above scenario deficiencies. Here are the perfect implementations:

Now let's start CSS3 the Text Gradient tour.

1. Build HTML content and basic styles:

We use a H1 tag to package a label:

View Plaincopy to Clipboardprint?

JavaScript code

The style is defined as follows, and we use Text-shadow to add a shadow to the text:

View Plaincopy to Clipboardprint?

1. H1 {
2. Font-family:segoe UI, Verdana, Sans-serif;
3. font-size:100px;
4. line-height:100px;
5. Text-shadow: -3px 0 4px #006;
6. }
7. H1 A:link,
8. H1 a:visited,
9. H1 A:hover,
10. H1 A:active {
11. Color: #d12;
12. Text-decoration:none;
13. }

JavaScript code

1. H1 {
2. Font-family:segoe UI, Verdana, Sans-serif;
3. font-size:100px;
4. line-height:100px;
5. Text-shadow: -3px 0 4px #006;
6. }
7. H1 A:link,
8. H1 a:visited,
9. H1 A:hover,
10. H1 A:active {
11. Color: #d12;
12. Text-decoration:none;
13. }

The basic effects are as follows:

2. Add a gradient effect:

We add a linear gradient to the text through the CSS3 mask property. Compared with the background gradient, it can be understood that background is behind the text, and mask is superimposed on the text. Mask can be set to normal color, linear gradient, radial gradient, or picture.

The code is as follows:

View Plaincopy to Clipboardprint?

1. H1 A:link,
2. H1 a:visited,
3. H1 A:hover,
4. H1 A:active {
5. Color: #d12;
6. Text-decoration:none;
7. -webkit-mask-image:-webkit-gradient (linear, left top, left bottom, from (Rgba (0,0,0,1)), to (Rgba (0,0,0,0)));
8. }

JavaScript code

1. H1 A:link,
2. H1 a:visited,
3. H1 A:hover,
4. H1 A:active {
5. Color: #d12;
6. Text-decoration:none;
7. -webkit-mask-image:-webkit-gradient (linear, left top, left bottom, from (Rgba (0,0,0,1)), to (Rgba (0,0,0,0)));
8. }

The effect is as follows:

3. The gradient is another color:

Because-webkit-gradient is actually handled as a picture, we cannot set the text color as a gradient to achieve the effect of a text color gradient to another color (you can try it if you don't believe it).

So we're going to construct a pseudo-element that, like our text, uses pseudo-elements because it avoids code redundancy by adding a label of the same content:

View Plaincopy to Clipboardprint?

1. H1:after {
2. Content: "Jiangyujie";
3. Color: #000;
4. text-shadow:3px 3px 1px #600;
5. }

JavaScript code

1. H1:after {
2. Content: "Jiangyujie";
3. Color: #000;
4. text-shadow:3px 3px 1px #600;
5. }

We then overlapped the two text with the Position property:

View Plaincopy to Clipboardprint?

2. H1 {
4. position:relative;
6. Font-family:segoe, Verdana, Sans-serif;
8. font-size:100px;
10. line-height:100px;
12. Text-shadow: -3px 0 4px #006;
14. }
16. H1 A:link,
18. H1 a:visited,
20. H1 A:hover,
22. H1 A:active {
24. Position:absolute;
26. Text-decoration:none;
28. top:0;
30. Z-index:2;
32. Color: #d12;
34. -webkit-mask-image:-webkit-gradient (linear, left top, left bottom, from (Rgba (0,0,0,1)), to (Rgba (0,0,0,0)));
36. }

JavaScript code

2. H1 {
4. position:relative;
6. Font-family:segoe, Verdana, Sans-serif;
8. font-size:100px;
10. line-height:100px;
12. Text-shadow: -3px 0 4px #006;
14. }
16. H1 A:link,
18. H1 a:visited,
20. H1 A:hover,
22. H1 A:active {
24. Position:absolute;
26. Text-decoration:none;
28. top:0;
30. Z-index:2;
32. Color: #d12;
34. -webkit-mask-image:-webkit-gradient (linear, left top, left bottom, from (Rgba (0,0,0,1)), to (Rgba (0,0,0,0)));
36. }

The effect is as follows:

4. Add Background:

The advantage of this approach is that we can customize the background completely unaffected by the gradient color. For example, we can add a background to the text, with the following effect:

Great effect, isn't it:)

5. Other:

For more information on CSS3 mask, refer to Webkit.org's article.