CSS3 properties: How to use Text-shadow text shadows

This article brings you the content is about CSS3 properties: Text-shadow text Shadow of the use of the method, there is a certain reference value, the need for friends can refer to, I hope to help you.

Text-shadow has not appeared, everyone in the web design of the shadow is generally used to make pictures of Photoshop, and now have CSS3 can use the Text-shadow property directly to specify the shadow. This attribute can have two effects, producing shadows and fuzzy bodies. This adds texture to the text when you don't use the picture.

Text-shadow once appeared in the CSS2, but in the css2.1 version was abandoned, and now css3.0 version has been re-picked back. This shows that Text-shadow this attribute is very worthwhile for us to do front-end personnel attention. Now many projects, CSS3 has many properties are used by front-end engineers, I also introduced in the previous CSS3 in the gradient, transparency, fillet three properties of the use, and CSS3 so many properties, I personally think Text-shadow use is the most of a property, As a front-end person I think it is necessary to learn and master this Text-shadow attribute.

Grammar:

Text-shadow:none | <length> None | [<shadow>,] * <shadow> or none | <color> [, <color>]*: text-shadow:[color (color)  x axis (x offset) y axis (y offset) blur radius (Blur)],[color (color) x-axis (x Offset) y-axis (y Offset) blur radius (Blur)] ... or text-shadow:[x axis (x offset) y axis (y offset)  blur radius (Blur)  color (color)],[x axis (x offset) y axis (y offset)  blur radius (Blur)  color] ...

Value:

<length>: Length value, which can be negative. Used to specify the extension distance of the shadow. where x offset is the horizontal offset value, and Y offset is the vertical offset value

<COLOR>: Specifies the shadow color, or it can be an rgba transparent color

<shadow>: The blur value of the shadow, not negative, that specifies the distance at which the blur effect is to be applied.

As shown in the following:

Description

You can apply one or more sets of shadow effects to an object, as shown in the previous syntax, separated by commas. Text-shadow:x-offset y-offset Blur Color X-offset represents the horizontal offset distance of the shadow, when the value is positive, the shadow shifts to the right, and if its value is negative, the shadow shifts to the left; Y-offset refers to the vertical offset distance of the shadow. If the value is positive, the shadow is offset downward and the shadow is shifted to the top when its value is negative, blur is the degree to which the shadow is blurred, its value cannot be negative, and if the value is larger, the shadow is blurred, and the shadow becomes clearer, and if shadow blur is not required, the blur value can be set to 0;color. It can use the RGBA color.

Browser compatibility:

Let's see an example.

First, give all of the demo a common style and class name:

. demo {      background: #666666;      width:440px;      padding:30px;      Font:bold 55px/100% "Microsoft Jas Black", "Lucida Grande", "Lucida Sans", Helvetica, Arial, Sans;;      Color: #fff;      text-transform:uppercase;  }

Next we add our own specific style to each demo, as shown below:

. demo1 {   text-shadow:red 0 1px 0;}

The effect is good, but let us headache is IE is not support text-shadow effect, but in order to be compatible with this problem, we have to use filter Filter:shadow to deal with (I do not advocate the use of filters). The Filter:shadow filter acts like a DropShadow, and can also use objects to produce a shadow effect, but the difference is that the shadow produces an asymptotic effect and is smoother with shadows.

Filter Syntax:

  E {Filter:shadow (color= color value, direction= value, strength= value)}

where e is the element selector, color is used to set the shadow color of the object, the direction is used to set the primary direction of the projection, the value is 0 zero (indicating upward orientation), 45 to the right, 90 to the right, 135 to the lower right, 180 to the lower, 225 to the left, 270 to the left. The strength is the intensity, similar to the blur value in Text-shadow.

We do not care about the effect of IE, I personally think that Text-shadow use, but also like Photoshop to make a very good effect, the following I here Luo listed some more good examples for everyone to reference

Note: All of the following demos need to be added to this common style:

. demo {      background: #666666;      width:440px;      padding:30px;      Font:bold 55px/100% "Microsoft Jas Black", "Lucida Grande", "Lucida Sans", Helvetica, Arial, Sans;;      Color: #fff;      text-transform:uppercase;  }

Effect one: Glow and Extra Glow effect (i.e. neon effect)

. demo2 {  text-shadow:0 0 20px Red;}

Glow effect, we set a larger fuzzy radius to increase its glow effect, you can change the different fuzzy radius values to achieve different effects, of course you can also add several different radius values, create a variety of different shadow effects. Just like the neon effect below.

. Demo3 {  text-shadow:0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de;}

Effect two: Apple Style Effect

. Demo4 {  color: #000;  text-shadow:0 1px 1px #fff;           }

Effect three: Photoshop Emboss Effect

. demo5 {  color: #ccc;  Text-shadow: -1px-1px 0 #fff, 1px 1px 0 #333, 1px 1px 0 #444;}

Effect two and effect three, I want to use Photoshop friend must be very familiar with, is not very similar to our Photoshop in the projection and embossed effect of AH. The application of these two effects must be noted that its fuzzy value must be set to 0, so that the text does not have any blur effect, mainly used to increase its texture, you can also make the same as in Photoshop, change the different angle of projection, so as to create a different effect, here I do not give an example, Interested friends can try for themselves.

Effect Four: Blurytext Effect

. demo6 {  color:transparent;  text-shadow:0 0 5px #f96;}

The effect of making fuzzy with Text-shadow is to note that the foreground color of text is set to transparent transparent, and if the blur value is larger, the effect is more sticky; second, we don't set an offset value in any direction. If combined with the previous Photoshop Emboss effect, you can wait for different effects. Please note that the Opera browser does not support this effect.

Together with the previous Photoshop Emboss effect, we can create an embossed effect with a blur:

. demo7 {  color:transparent;  text-shadow:0 0 6px #F96, -1px-1px  #FFF, 1px-1px  #444;}

Effect Five: Inset text effect

. demo8 {  color: #566F89;  Background: #C5DFF8;  text-shadow:1px 1px 0 #E4F1FF;}

This effect needs to be noted: the foreground color of the text is darker than the background color, the shadow color is slightly brighter than the background color, this step is important, if the shadow color is too bright to look strange, if too dark will not show the effect. The specific implementation may look at the production of Stylizedweb. The inset effect is the shadow effect of the text, and is also a common effect, and the shadow is the same small offset that gives the person a subtle, prominent effect.

Effect Six: Stroke text effect

. demo9 {  color: #fff;  text-shadow:1px 1px 0 #f96, -1px-1px 0 #f96; }

Stroke effect compared to our in Photoshop, I admit that the effect is much worse, there are breakpoints, but sometimes you can try to achieve a special stroke effect, its main use of two shadows, the first projection to the left, and the second to the right under the projection, also note that the shadow effect of making strokes we do not use fuzzy values.

Effect VII: 3D text effect

. demo10 {  color: #fff;  text-shadow:1px 1px RGBA (197, 223, 248,0.8), 2px 2px Rgba (197, 223, 248,0.8), 3px 3px Rgba (197, 223, 248,0.8), 4px 4px Rgba ( 197, 223, 248,0.8), 5px 5px Rgba (197, 223, 248,0.8), 6px 6px Rgba (197, 223, 248,0.8);}

We've changed the projection direction to make another 3D text effect.

. demo11 {  color: #fff;  Text-shadow: -1px-1px Rgba (197, 223, 248,0.8), -2px-2px Rgba (197, 223, 248,0.8), -3px-3px Rgba (197, 223, 248,0.8), -4px-4 PX Rgba (197, 223, 248,0.8), -5px-5px Rgba (197, 223, 248,0.8), -6px-6px Rgba (197, 223, 248,0.8);}

3D text effect using the principle is like Photoshop, we copied the text below or above the layers, and each layer to the left or the lower right to move a 1px distance, so as to create a 3D effect. At the same time, the more layers we have, the heavier they are. Instead of using Text-shadow, you use multiple shadows and set the shadow color to the same, giving it a better use of the RGBA color effect, as in the example above.

Effect Eight: Vintge/retro text effect

. demo11 {  color: #eee;  text-shadow:5px 5px 0 #666, 7px 7px 0 #eee;}

Vintage Retro This style of text effect is composed of two text shadows, it should be noted here: the first shadow color and background color is the same; the text foreground color is the same as the second shadow color

Effect Nine: Anaglyphic text effect

. demo13 {  Color:rgba (255, 179, 140,0.5);  text-shadow:3px 3px 0 Rgba (180,255,0,0.5);}

Anaglyphic text effect plays a complementary effect, thus making a three-dimensional. The effect is a combination of the text shadow that the CSS re-uses and the RGBA color of the foreground of the text. Use the RGBA color on both the foreground and shadow of the text so that the underlying text is visible through the shadow.

Above I mainly listed nine different effects of examples, of course, you can change a variety of ways to produce some special effects, but also once again confirmed that CSS3 in the Text-shadow strength is not shallow, I hope you can like this attribute, and can better use this property. Although IE does not support now, but we do not fear to use CSS3, because we do the front-end will need to master these new technologies sooner or later.