css3-text-text-shadow

First, Text-shadow

Grammar:

<length> None | [<<<<color>]*: text-shadow:[color (color) X axis (x offset) y axis (y offset) blur radius (Blur)], [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)] ... 

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:

{   Text-shadow: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:

  {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.

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;                /span>              

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

{  text-shadow: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.

{  text-shadow:#ff00de;}  

Effect two: Apple Style Effect

{  color:text-shadow:}  

Effect three: Photoshop Emboss Effect

{  color:text-shadow: -1px-#fff,#333,#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.

Effect Four: Blurytext Effect

{  color:   transparent ;  Text-shadow:0#f96;}    

The effect of making fuzzy with Text-shadow is to note that the foreground color of text is set to transparent transparent, if the blur value is bigger, the effect is more sticky ; We do not set an offset value in any direction . if combined before The Photoshop Emboss effect on the face allows you to 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 :

{  color: transparent;  Text-shadow:#F96,-1px-1px-#444;}       

Effect Five: Inset text effect

{  color:background:Text-shadow:#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

{  color:text-shadow:#f96,-1px-}    

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 need to note that Create a shadow effect for strokes we don't use fuzzy values .

Effect VII: 3D text effect

. demo10{Color #fff;Text-shadow: 1px1pxRgba197,223,248,0.8),
2px2pxRgba197,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-1pxRgba197,223,248,0.8),
-2PX-2pxRgba197,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);}        

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

{  color:text-shadow:#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

{  color:rgba (Text-shadow:rgba (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 .

Reprinted from http://www.w3cplus.com/

css3-text-text-shadow