Css3 text-shadow font shadow description, css3text-shadow

Css3 text-shadow font shadow description, css3text-shadow

Text-shadow: adds a shadow to the font. You can set the relevant attribute values for the text-shadow attribute to achieve the desired font shadow effect and reduce the image usage.

 
Basic description:
Text-shadow: X axis Y axis Rpx color;
Attribute description (in sequence): the X axis of the Shadow (negative values can be used) the Y axis of the Shadow (negative values can be used) the color of the Shadow blur value (size ).
Note (PS): This attribute is used for text shadow, rather than for Box Model operations. If you set the box model shadow, refer to the knowledge points:Box-shadow(Likewise)

Use filter: shadow () in IE ()
Like box-shadow, these attributes are newly added to css3. To be compatible with mainstream browsers and support earlier versions of these main browsers, when the text-shadow attribute is used on mainstream browsers, we need to prefix the property name in the form of Google and Apple browser-webkit-text-shadow.

The Firefox Browser needs to be written as-moz-text-shadow. The openg browser-o-text-shadow IE> 9-ms-text-shadow

Example:

-Webkit-text-shadow: 0 0 10px # c06;
-Moz-text-shadow: 0 0 10px # C06;
-O-text-shadow: 0 0 10px # C06;
Text-shadow: 0 0 10px # c06;
Filter: Shadow (Color = 'green', ction = '000000', Strength = '6')/* Color sets the Direction of the Shadow, values: 0 (0 indicates the upward direction), 45 indicates the upper right, 90 indicates the right, 135 indicates the lower right, 180 indicates the lower right, 225 indicates the lower left, 270 indicates the left side, and 315 indicates the upper left corner; strength is the range, similar to the fuzzy radius value in text-shadow */
/* Filter: dropshadow (OffX = 2, OffY = 2, Color = 'red', Positive = 'true ');*/

 Basic exercises: (display in font format)

I. Common forms:

<Style type = "text/css">
. Pubdemo {width: 320px; margin: 20px; padding: 20px; font: bold 50px/100% ""; border: 1px solid red}
. Demo1 {text-shadow: 0px 0 8px # F00}. demo2 {text-shadow: 5px 5px 8px # F00}

. Demo3 {text-shadow:-5px-5px 8px # F00}
. Demo4 {filter: shadow (Color = # f00000, Direction = 45, Strength = 8 );}
</Style>

<! -- 1. If the value of the X axis and Y axis is not set, the Blur Radius Range and color of the value are applied. -->
<P class = "pubdemo demo1"> text-shadow </p>

 

<! -- 2. the x-axis and Y-axis change the positive value (positive value to the right) So it becomes like this -->
<P class = "pubdemo demo2"> text-shadow2 </p>

 

<! -- 3. the X axis and Y axis change to a negative value (negative value to the left), so it becomes like this -->
<P class = "pubdemo demo3"> text-shadow3 </p>

 

Note: a positive value moves the shadow to the right/down, and a negative value moves to the left/up.

 <! -- 4. in IE browser -->

<P class = "pubdemo demo4"> text-shadow3 </p>

 

2. Four Corners () shadow:

<Style type = "text/css">
* {Padding: 0; margin: 0}
. Pubjiao {width: 350px; margin: 20px; font-size: 20px; font-weight: bold; border: 1px solid red}
. Pubjiao div {float: left; width: 140px; padding: 10px; border: 1px solid green}
</Style>
<Div class = "pubjiao">

Upper left corner:Text-shadow:-4px-4px 1px green;

Lower left:Text-shadow:-4px 4px 1px green;

Upper right corner:Text-shadow: 4px-4px 1px green;

Bottom right corner:Text-shadow: 4px-4px 1px green;
</Div>

 

3. Multi-shadow-Edge Addition examples (separated by commas) are not obvious:

. Kind1 {text-shadow: 0px 0px 2px green,
0px 0px 3px blue,
0px 0px 4px red;
Font-size: 38px; color: yellow ;}

 

 

4. Custom shadow-based on your preferences

1. Similar to flame

<Style type = "text/css">
. Fire {font-size: 40px; font-weight: bold; background: #000; text-align: center; padding: 24px;
Text-shadow: 0 0 4px white,
0-5px 4px # ff3,
3px-10px 6px # fd3,
-3px-15px 11px # C90,
3px-25px 18px # f20;
/* 4px-35px 28px # C30 ;*/
}
</Style>
<P class = "pubsty fire"> indifferent </p>

 

 2. 3D

<P class = "pubsty threeD"> indifferent </p>

. ThreeD {color: # fff; text-shadow: 0 0 1px #999,
1px 1px 2px #888,
2px 2px 2px #777,
3px 3px 2px #666,
4px 4px 2px #555,
5px 5px 2px #333;
}

 

3. A variety of features (added later )......

 

If you are familiar with the exercises and understand the principles, you can rewrite them at will. In combination with the animation effect of css3, The Flash layer (Word) is easy to implement .. Hope to help you ..