Use CSS3 to create a Text color Gradient (CSS3 Text Gradient) and css3gradient

Use CSS3 to create a Text color Gradient (CSS3 Text Gradient) and css3gradient

Consider how to achieve a gradient similar to the following in the webpage?

 

 

In the traditional implementation, a transparent gradient image is used to cover the text. Specific implementation methods can refer to http://www.qianduan.net/css-gradient-text-effect.html. The advantage of this method is that the image can be controlled, so it can achieve a very complex gradient effect, but the disadvantage is that the gradient of the image must be consistent with the background color, at the same time, the loss of mouse clicks, Text Selection and other events.

You can use the background gradient-webkit-gradient of CSS3 to replace the image with a background gradient DIV. The following is an example of the implementation effect. Compared with the above scheme, the advantage is that the image is not used to reduce the Request volume and traffic. However, the above disadvantages cannot be solved.

 

 

Is there a perfect solution?

The following describes how to use the webkit-mask scheme to achieve text gradient, completely avoiding the shortcomings of the above scheme. Below is the perfect implementation:

 

 

Now let's start the CSS3 Text Gradient tour.

1. Construct HTML content and basic styles:

We use an H1 label to package A label:

View plaincopy to clipboardprint?

1. <H1> <a href = "#" mce_href = "#"> Jiangyujie </a>

 

Javascript code

1. <H1> <a href = "#" mce_href = "#"> Jiangyujie </a>

 

 

The style is defined as follows. We use text-shadow to add a shadow for 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 results are as follows:

 

 

2. Add the gradient effect:

We use the mask attribute of CSS3 to add a linear gradient to the text. Compared with the gradient of the background, it can be understood that the background is behind the text, while the mask is superimposed on the text. Mask can be set to common color, linear gradient, radial gradient or image.

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 (,), to (rgba, 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 (,), to (rgba, 0, 0 )));
8. }

 

 

The effect is as follows:

 

 

3. Gradient to another color:

Because-webkit-gradient actually processes images, therefore, we cannot set the text color to gradient to achieve the effect of changing the text color to another color (you can try it if you don't believe it ).

Therefore, we need to construct a pseudo element with the same content as our text. The reason for using the pseudo element is to avoid code redundancy caused by adding a label with the same content:

View plaincopy to clipboardprint?

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

 

Javascript code

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

 

 

Then we use the position attribute to overlap the two texts:

View plaincopy to clipboardprint?

1. H1 {
2. Position: relative;
3. Font-family: Segoe, Verdana, sans-serif;
4. Font-size: 100px;
5. Line-height: 100px;
6. Text-shadow:-3px 0 4px #006;
7. }
8. H1 a: link,
9. H1 a: visited,
10. H1 a: hover,
11. H1 a: active {
12. Position: absolute;
13. Text-decoration: none;
14. Top: 0;
15. Z-index: 2;
16. Color: # d12;
17. -Webkit-mask-image:-webkit-gradient (linear, left top, left bottom, from (rgba (,), to (rgba, 0, 0 )));
18. }

 

Javascript code

1. H1 {
2. Position: relative;
3. Font-family: Segoe, Verdana, sans-serif;
4. Font-size: 100px;
5. Line-height: 100px;
6. Text-shadow:-3px 0 4px #006;
7. }
8. H1 a: link,
9. H1 a: visited,
10. H1 a: hover,
11. H1 a: active {
12. Position: absolute;
13. Text-decoration: none;
14. Top: 0;
15. Z-index: 2;
16. Color: # d12;
17. -Webkit-mask-image:-webkit-gradient (linear, left top, left bottom, from (rgba (,), to (rgba, 0, 0 )));
18. }

 

 

Shows the effect:

 

 

4. Add a background:

The advantage of this implementation method is that we can customize the background without being influenced by the gradient color. For example, we can add a background for the text. The effect is as follows:

 

 

Great results, isn't it :)

5. Others:

For details about CSS3 mask, refer to the Webkit.org article.

CSS3 text gradient Guide

To Google, the key is that you are missing these two styles:

-Webkit-background-clip: text;
Color: transparent;

<! DOCTYPE html>
<Html>
<Head>
<Meta http-equiv = "Content-type" content = "text/html; charset = UTF-8">
<Style>
Html, body, p {
Margin: 0;
Padding: 0;
}
P {
Width: 700px;
Height: 50px;
Font-size: 40px;
Font-weight: bold;
Line-height: 50px;
Text-align: center;
Background-image:-webkit-gradient (linear, left top, left bottom, color-stop (0, # fb7f87), color-stop (1, # bc0404 ));
-Webkit-background-clip: text;
Color: transparent;
}
</Style>
</Head>
<Body>
<P> 123 4567 8901 </p>
</Body>
</Html>

How to Implement css3 gradient?

Different browsers have different prefixes, which are basically similar. The following is a linear gradient, starting from the top, from black to white.
-Webkit-linear-gradient (top, #000, # fff );
-Moz-linear-gradient (top, #000, # fff );
-O-linear-gradient (top, #000, # fff );
You can also add colors in the middle of the gradient.
-Webkit-linear-gradient (top, #000, # eee 20%, # fff );
You can also use color stop to keep up with the preceding meaning.
-Webkit-linear-gradient (top, #000, color-stop (0.2, # eee), # fff)