CSS3 team--text clone text-shadow_html/css_WEB-ITnose

Previous article: "CSS3 Team?? Attack of border-radius"

In the previous article, border-radius was put on stage for a show, and today we continue to take turns with the characters. A group of shadows are squirming in the audience. Well, the one on stage today has a shadow attribute. There are two attributes of shadow: box-shadow and text-shadow. Today we are talking about text-shadow first.

text-shadow appeared in CSS2, but it was short-lived and was abandoned in CSS2.1. Now this shadow is full of blood in CSS3 Return.

As the name suggests, text-shadow is used to add shadow effects to text. We will see all kinds of gorgeous text shadow effects on web pages. Maybe we will ask how these effects are achieved, how should the value be set when using text-shadow, and why should the value be set this way instead of that? value.

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

Maybe some friends will say, isn’t text-shadow just text-shadow? Isn’t it just text shadow? What’s there to say? This cannot be said to be wrong, and that is not what I want to say. What I want my friends to understand is:

text-shadow is a copy of the text. Look at the picture below:

The white text is the text body, the red text is the text shadow, and the shadow is a copy or clone of the body.

Text-shadow is a copy of the modified text and a clone of the modified text. As the saying goes: if the shadow is not modified, the text shadow is an exact clone of the text. Remembering this sentence, it will be very helpful for us to understand how to set the text-shadow value for different text shadow effects.

First of all, it is necessary to look at the syntax of text-shadow:

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

h-shadow is Refers to the position of the horizontal shadow, that is, the horizontal offset. Negative values ​​are allowed. When the value is positive, the shadow is offset to the right, when the value is negative, the shadow is offset to the left;

v-shadow refers to the position of the vertical shadow, that is, vertical offset, negative values ​​are allowed. When the value is positive, the shadow shifts toward the bottom; when the value is negative, the shadow shifts toward the top;

blur refers to the blur distance, that is, the size of the blur range;

Note: Be sure to fully To understand the meaning of blur, please click here to see the second implementation in Section 3.

color shadow color.

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

text-shadow can add one or more shadows to text. When adding multiple shadows, the shadow list needs to be separated by commas.

Before I formally explain the value method of the text-shadow attribute, let me talk about my own understanding of text-shadow:

1. The larger the blur value, the The blurr the shadow; another note: To fully understand the meaning of blur, please click here to see the second implementation of Section 3.

2. Transparent can also be used as a color;

3. The overlay of text copies can achieve a row effect;

4. The superposition of multiple colors will cause special visual effects;

The following uses examples to explain how to Start with principles and achieve corresponding effects 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 examples are all simple modifications made on this example.

1. Glow effect

You should have seen the glow effect before, it is a relatively common effect. Just in case, paste the effect first:

The glow effect is very simple. As you can see from the rendering, the text has no position offset, just adding a It’s just a blurred copy , so the text-shadow implementation is very simple:

CSS Code:

text-shadow: 0 0 25px #ff0000;

2. Blur effect

First, the effect picture:

This effect is somewhat similar to the glow effect above, so some friends may have the following thoughts: Isn’t it just that the text color and shadow color are the same? Just plant colors, so the implementation of this friend may be as follows:

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

What about the effect:

The effect is obviously different. This is actually a glow effect. The reason why this friend made the mistake is that he did not understand the concept of blur. Blur blurs the entire shadow, that is, blurs the entire copy of the text, instead of just adding a blurred edge to the copy. So the effect we want to achieve is this: No text entity, just a blurred copy of the text. The mistake of this friend is that he superimposed the text entity on the blurred copy of the text, making the originally blurry part clear again. So the correct implementation is as follows:

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

将文本前景色设为透明，说白了就是不要文本实体，只要一个模糊的文本副本。

3、描边效果

描边效果可以先想象下效果，描边描边，自然是用线条把文本从边缘描一遍，所以实现方法也非常简单：给文本加上两个阴影，一个是在文本左上边缘加上阴影（即，把文本副本往左上移动1px），另一个是在文本右上边缘加上阴影（即，把文本副本往右上移动1px），因为仅仅是描上一条细细的边，所以自然用不上blur，实现及效果如下：

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

当然该描边效果也有缺陷，那就是并不是完全的描边，我们放大看一下：

放大后会看到斜对角处并没有描边有断点，原因也很简单，两个文本副本分别向左上和右下偏移，自然会在斜对角处分开。毕竟和专业的修图软件相比该效果也只能算是停留在实现的程度上。

4、3D文本效果

3D文本效果其实和描边效果实现思路有些相似，只是换成了单方向添加多个阴影，稍微想想就会明白，其实就是把多个文本副本依次小余量地往外叠加即可，叠加的越多，3D出来的部分越多。

所以实现如下：

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

当然也可以反向投影，实现如下：

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

5、里特罗复古风格

这是一个很有层次感和历史感的风格，先上效果图：

其实看完效果图，小伙伴们应该很快就会想到实现方法：两个阴影实现，一个阴影和背景色相同，一个阴影和文字前景色相同。Bingo，实现确实如此。

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

当然用text-shadow还能做出很多种文本特效，只要理解了四个参数的含义，并充分利用阴影的偏移、模糊范围和颜色的变换，就能做出很多很出色的特效。

如果还有很棒的shadow特效，欢迎分享~~~~