CSS3 detachment -- text separation text-shadow, css3text-shadow

CSS3 detachment -- text separation text-shadow, css3text-shadow
Previous Article: CSS3 team-attacking border-radius

In the previous article, we pulled border-radius onto the platform for a show. Today we are following the role. The next shadow is crawling. Well, what we came to power today is a shadow attribute. The shadow attributes include box-shadow and text-shadow. Today we are talking about text-shadow first.

I. shadow

Text-shadow appeared in CSS2, but it was a flash in the flash and abandoned again in CSS2.1. Now the shadow is full of blood in CSS3.

As the name suggests, text-shadow is used to add shadow effects to text. On the webpage, we will see various brilliant text shadow effects. Maybe we will ask how these effects are achieved and how to set them with text-shadow, why is this value not so.

It is not difficult to answer these questions. First, we must understand what text-shadow is.

Some friends may say that text-shadow is not text-shadow, but text shadow. What can be said. This is not true, but I am not talking about it. What I want my friends to understand is:

Text-shadowIs a copy of the text. See:

 

The white text is the text ontology, the red text is the text shadow, and the shadow is a copy of the ontology.

Text-shadow is a copy of the modified text. It is a separation of the modified text. In other words, if the shadow is not modified, the text shadow is the same as the text. Remembering this sentence helps us to understand how different text shadow effects should be given to text-shadow values.

Ii. Value features of the text-shadow attribute

First, let's take a look at the text-shadow Syntax:

text-shadow: h-shadow v-shadow blur color;

H-shadow refers to the position of the horizontal shadow, that is, horizontal offset, which allows negative values. When the value is positive, the shadow is shifted to the right. If the value is negative, the shadow is shifted to the left;

V-shadow refers to the position of the vertical shadow, that is, vertical offset, which allows negative values. When the value is positive, the shadow offsets to the bottom. If the value is negative, the shadow offsets to the top;

Blur refers to the fuzzy distance, that is, the size of the fuzzy range;

Note: To fully understand the meaning of blur, click here to see the second implementation in section 3.

Color shadow color.

Among them, h-shadow and v-shadow are mandatory, and blur and color are optional.

Text-shadow can add one or more shadows to the text. When Multiple shadows are added, the shadow list must be separated by commas.

Before officially explaining the Value Method of the text-shadow attribute, let's talk about the following points:

1. The greater the value of blur, the blurrier the shadow. Note: to fully understand the meaning of blur, click here to see the second implementation in section 3.

2. transparent can also be regarded as a color;

3. overlapping text copies can achieve the effect of sorting;

4. the superposition of multiple colors may cause special visual effects;

Iii. Understanding the implementation of shadow effects based on principle

The following uses examples to explain how to achieve the desired effect based on your own ideas. First, paste a text demo:

HTML Markup:

  <div class="text_demo">    text demo  </div>

CSS Code:

.text_demo{  background: #666666;  width: 400px;  height: 200px;  font-size: 60px;  line-height: 200px;  text-align: center;  font-weight: bold;  text-transform: uppercase;  color: #ffffff;}

DEMO effect:

 

Note: The following instances have been modified.

1. Glow Effect

The glow effect is a common effect. Just in case, paste the effect first:

 

The glow effect is very simple, as shown in the following figure,The text has no location offset, but a fuzzy copy is added.So the text-shadow implementation is simple:

CSS Code:

text-shadow: 0 0 25px #ff0000;

2. blur effect

First:

 

This effect is similar to the above glow effect, so some friends may have the following idea: the text color and the shadow color are the same color, therefore, the implementation of this partner may be as follows:

color: #ff2200;text-shadow: 0 0 8px #ff2200;

The effect is as follows:

 

The effect is obviously different, which is actually a glow effect. The reason for this friend's mistake is that he does not understand the concept of blur.Blur the entire Shadow, that is, the entire copy of the fuzzy text, instead of simply adding a fuzzy edge to the copy.Therefore, the effect we want to achieve is as follows:Do not use text entities, as long as a fuzzy copy of text.The friend was wrong: he added the text entity to the fuzzy copy, and made the fuzzy part clear again. So the correct implementation is as follows:

color: transparent;text-shadow: 0 0 8px #ff2200;

Set the text foreground to transparent. To put it bluntly, there is no text entity, as long as there is a fuzzy copy of the text.

3. Stroke Effect

The stroke effect can be imagined first, and the stroke is naturally used to draw the text from the edge with lines, so the implementation method is also very simple:Add two shadows to the text. One is to add a shadow to the top left edge of the text (that is, move the text copy to the top left 1px), and the other is to add a shadow to the top right edge of the text (that is, move the text copy to the top right by 1 px). Because it is just a thin side, blur is not used,The implementation and effect are as follows:

color: #ffffff; text-shadow: 1px 1px 0 #ff0000 , -1px -1px 0 #ff0000;

 

Of course, the stroke effect is also flawed, that is, it is not a full stroke. Let's zoom in and take a look:

 

After being zoomed in, we can see that there is no breakpoint at the diagonal corner. The reason is also very simple. The two copies of the text are shifted to the left and the bottom right, respectively, and are naturally opened at the diagonal corner.After all, compared with professional graph repair software, this effect can only be regarded as the degree of implementation.

4. 3D text Effect

In fact, 3D text effects are similar to the implementation of stroke effects, except that multiple shadows are added in a single direction,In fact, multiple text copies can be stacked out in small quantities in turn., The more overlapping, the more 3D Parts.

So the implementation is as follows:

color: #ffffff;text-shadow: 1px 1px #cccccc,2px 2px #cccccc,3px 3px #cccccc,4px 4px #cccccc,5px 5px #cccccc,6px 6px #cccccc;

 

Of course, you can also perform reverse projection as follows:

color: #ffffff;text-shadow: -1px -1px #cccccc,-2px -2px #cccccc,-3px -3px #cccccc,-4px -4px #cccccc,-5px -5px #cccccc,-6px -6px #cccccc;

 

5. Retro's vintage style

This is a style with a strong sense of experience and history. First:

 

As a matter of fact, our friends should soon come up with the implementation methods:Two Shadows are implemented. One shadow is the same as the background color, and the other is the same as the text foreground color.Bingo, implementation is true.

color: #ffffff;text-shadow: 5px 5px 0 #666, 7px 7px 0 #eee;

4. Remove a knot

Of course, text-shadow can also be used to make many text effects. You only need to understand the meaning of the four parameters and make full use of the shadow offset, blur range, and color transformation, you can make many outstanding special effects.

If you still have great shadow effects, please share them ~~~~

Previous Article: CSS3 team-attacking border-radius