CSS3 Squad--text Fen Text-shadow

previous: "CSS3 squad--attack on the Border-radius"

The last article took Border-radius to the stage and walked a show, today we turn the character to go on. The next group of Shadow in the peristalsis, well, today came to power is a shadow attribute. There are two properties about shadow: Box-shadow and Text-shadow, and today we're talking about Text-shadow first.

One, behind the shadow of Shadow

Text-shadow in the CSS2, but in a flash, in the CSS2.1 was abandoned, and now this group of Shadow in the CSS3 full of blood return.

As the name implies, Text-shadow is used to add shadow effects to text. On the Web page we will see a variety of colorful text shadow effect, perhaps we will ask how these effects are done, with Text-shadow set the words should be how to value, why to take the value instead of that value.

It is not difficult to answer these questions, first of all we must first understand, Text-shadow is what is a thing.

Perhaps a small partner will say, Text-shadow is not Text-shadow is not the text shadow, there is nothing to say. This is not wrong, and I am not saying this, I want to let small partners understand is:

Text-shadow is a copy of the text. See:

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

Text-shadow is a copy of the modified text, a clone of the modified text, saying: If the shadow is not decorated, the text shadow is the same as the text of a fen. Remembering this sentence is very helpful for us to understand how different text shading effects should give Text-shadow value.

second, about the value of the Text-shadow property characteristics

First it is necessary to look at the syntax of Text-shadow:

Text-shadow:h-shadow V-shadow blur color;

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

V-shadow refers to the position of the vertical shadow, which is the vertical offset, allowing negative values. When the value is positive, the shadow is shifted to the bottom and the value is negative, and the shadow is shifted to the top;

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

Note: To fully understand the meaning of blur, please poke here to see the second implementation of section three.

Color Shadow.

Where H-shadow and V-shadow are mandatory options, blur and color are optional.

Text-shadow you can add one or more shadows to your text, and when you add multiple shadows, the list of shadows needs to be separated by commas.

Before formally explaining the Text-shadow attribute value method, say a few points of my own understanding of Text-shadow:

1, the greater the blur value, the more blurred the shadow; Note: To fully understand the meaning of blur, please poke here to see the second implementation of section three.

2, transparent transparent can also be regarded as a color;

3, the text copy of the superposition can achieve the effect of the row;

4, a variety of color overlay will cause special visual effects;

three, from the principle of understanding the implementation of shadow effects

The following is an example of how to proceed from the principle according to their own ideas to achieve the corresponding effect. First, put a text on the demo:

HTML Markup:

  <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 example is a simple modification on this instance.

1. Glow Effect

The glow effect should have been seen, which is a more common effect. Just in case the effect is affixed:

The glow effect is very simple, from the above can be seen, the text has no position offset, just add a vague copy only, so the Text-shadow implementation is very simple:

CSS Code:

text-shadow:0 0 25px #ff0000;

2. Blur Effect

First on:

This effect has a certain similarity to the glow effect above, so some small partners may have the following ideas: not just the color of the text and the shadow color for the same color, so the implementation of the small partner may be as follows:

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

What about the effect:

The effect is obviously different, which is actually a glow effect. The reason the little partner was wrong was that he did not understand the concept of blur. Blur is blurring the entire shadow, which is the entire copy of the blurred text, rather than just adding a blurred edge to the copy. so the effect we want to achieve is this: do not text entities, as long as a vague copy of the text. the little partner was wrong: he superimposed the text on the vague copy of the text, making the vague part clear again. So the correct implementation is as follows:

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

The text foreground color is set to transparent, which is not the text entity, as long as a vague copy of the text.

3. Stroke Effect

The stroke effect can first imagine the effect, stroke strokes, and naturally use lines to draw the text from the edge, so the implementation is very simple: add two shadows to the text, one is to add a shadow on the top left edge of the text (that is, the copy of the text to move to the top left 1px), the other is the upper right edge of the text Move the text copy to the top right 1px), because it is only a thin edge, so naturally not blur, the realization 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 not a complete stroke, we zoom in to see:

when zoomed in, you will see that there is no breakpoint at the diagonal and the reason is simple, two copies of the text are shifted to the left and right, and will naturally be separated diagonally. after all, and professional revision software compared to the effect can only be considered to stay in the degree of implementation.

4.3D Text Effect

3D text effect and stroke effect of the implementation of some similar ideas, just replaced with a single direction to add more than one shadow, a little thought will understand, in fact, the number of copies of the text in turn small margin to the outside overlay can , superimposed more, 3D out of the more.

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 #ccccc C

Of course, the reverse projection can be implemented 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. Ritro Retro Style

This is a very hierarchical and historical style, first on:

In fact, the little friends should soon think of the implementation method: Two shadow implementation, a shadow and the background color is the same, a shadow and text foreground color is the same. Bingo, the implementation is indeed so.

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

Four, a small knot

Of course, with Text-shadow can also make a lot of text effects, as long as you understand the meaning of the four parameters, and make full use of the shadow offset, blur range and color transformation, you can make many excellent effects.

If there is a great shadow effect, welcome to share ~ ~ ~

previous: "CSS3 squad--attack on the Border-radius"

CSS3 Squad--text Fen Text-shadow