CSS3 Shadow (Text-shadow)

Previously, shadow effects were generally made into pictures, and now with CSS3 you can use the Text-shadow property directly to implement shadows. This attribute can have two effects, producing shadows and fuzzy bodies. This adds texture to the text without the need for a picture.

Basic syntax:

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 (color)] ...

Range of values:

<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:

Brief 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 becomes blurred, and the shadow becomes clearer. If shadow blur is not required, you can set the blur value to 0;color to refer to the color of the shadow, which can use the RGBA color.

. demo {background: #666666;     width:440px;     padding:30px;     Font:bold 55px/100% "Microsoft Jas Black", "Lucida Grande", 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;}

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

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

Glow effect, we set a larger fuzzy radius to enhance its glow effect, you can change the different fuzzy radius 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.

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

Effect Two: Stroke text effect

. demo1{text-shadow:1px 1px 0 #f96, -1px-1px 0 #f96;}

Stroke effect compared to our in Photoshop, the effect is much worse, there are breakpoints, but sometimes can be used 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 the production stroke is not applicable to fuzzy values.

effect Three: 3D Text Effect

. demo1 {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); }

. demo1{Text-shadow: -1px-1px rgba (197, 223, 248,0.8), -2px-2px Rgba (197, 223, 248,0.8), -3px-3px Rgba (197, 22 3, 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);}

3D text effect using the principle is like Photoshop, we have copied a number of layers below or above the text, 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.

Use Text-shadow can also set out a lot of effect, here no longer one by one narration: For details, please refer to the following link:

Http://www.cnblogs.com/lhb25/archive/2013/01/30/css3-text-shadow.html

CSS3 Shadow (Text-shadow)