Text shadow in CSS3

Recently I have been finishing some of my learning about CSS3. Now I have sorted out how to use the CSS3 selector, CSS3 rounded corner, and CSS3 element shadow attributes. Today, we will sort out the text shadow-text-shadow in CSS3. Hope to help you.

Before CSS3 was launched, the methods for processing text shadows were basically images. Until the emergence of CSS3, we have further improved the method for creating text shadows. In fact, the text shadow-text-shadow has appeared in CSS2, but it has not been relentlessly abandoned in CSS2.0, and is now used in CSS3, this shows that text shadow is worth noting. Therefore, as a qualified front-end personnel, it is imperative to grasp the text shadow.

I. text-shadow syntax

　　

Object selector {text-shadow: X axis offset Y axis offset shadow blur radius shadow color}

Note: One or more projections can be used for text-shadow. If multiple projections are used, separate them with commas.

　　

The box-shadow attribute can have a maximum of six parameter settings. The values are as follows:

(1)Shadow horizontal offset: The horizontal offset of shadow. The value can be positive or negative. If the value is positive, the shadow is on the right of the object. If the value is negative, shadow is on the left of the object;

(2)Vertical offset of shadow: It refers to the vertical offset of the Shadow. Its value can also be positive or negative. If it is a positive value, the shadow is at the bottom of the object. If its value is negative, the shadow is at the top of the object;

(3)Shadow blur radius: This parameter is optional, but its value can only be positive. The larger the value, the blurrier the shadow, and The clearer the shadow. If the value is 0, it indicates that the shadow has no blur effect.

(4)Shadow color: This parameter is optional. If no color is set, the browser will take the default color, but the default color of each browser is different, especially in the safari and chrome browsers under the webkit kernel will be colorless, this parameter is transparent. We recommend that you do not omit this parameter.

　　

　　

(1)Firefox4.0-

-Moz-text-shadow: Specifies the offset of the X axis and the offset of the Y axis. specifies the shadow color of The Blur radius;

(2)Safari and Google chrome10.0-

-Webkit-text-shadow: X axis offset Y axis offset shadow blur radius shadow color;

(3)Firefox4.0 +, Google chrome 10.0 +, Oprea10.5 + and IE9

Text-shadow: X axis offset Y axis offset shadow blur radius shadow color;

　　

　　

E {filter: shadow (Color = Color value, ction = value, Strength = value )}

E is the element selector, and Color is used to set the shadow Color of the object. Direction is used to set the main Direction of the projection. The value 0 indicates zero (indicating the upward Direction), 45 indicates the upper right, and 90 indicates the right, 135 is lower right, 180 is lower, 225 is lower left, 270 is left, 315 is upper left; Strength is Strength, similar to the blur value in text-shadow.

　　

HTML code:

Preview effect:

CSS code:

HTML code:

Preview effect:

Preview effect:

7. Example 7: Text shadow effect

CSS code:

　　

　　

.demo {background: #ccc;width: 224px;padding: 30px;font: bold 55px/100% "Lucida Sans";text-transform: uppercase;color: #fff;text-shadow: 1px 1px 0 #f96,                     -1px -1px 0 #f96; }

　　

<Div class = "demo"> Menglong xiaozhan </div>

　　

　　

CSS code:

.demo {background: #ccc;width: 224px;padding: 30px;font: bold 55px/100% "Lucida Sans";text-transform: uppercase;color: #fff;text-shadow:1px 1px #d7e8f9,2px 2px #d7e8f9,3px 3px #d7e8f9,4px 4px #d7e8f9,5px 5px #d7e8f9,6px 6px #d7e8f9; }

　　

<Div class = "demo"> Menglong xiaozhan </div>

Preview effect:

　　

　　

.demo {background: #ccc;width: 224px;padding: 30px;font: bold 55px/100% "Lucida Sans";text-transform: uppercase;color: #eee;text-shadow:3px 3px 0 #ccc, 5px 5px 0 #eee;}

　　

<Div class = "demo"> Menglong xiaozhan </div>

　　

　　

CSS code:

Div {filter: shadow (Color = #000000, Direction = 45, Strength = 5); font: 40px/60px ""; height: 60px ;}

　　

<Div> Menglong xiaozhan </div>

　　

A total of 11 different small effects are listed above. These cool effects are implemented using text shadow in CSS3-text-shadow, and no image is used. From now on, I have been gradually getting in touch with these emerging technologies and keeping my code up with the times. It has always been my motto. I would like to share with you here. CSS3 text shadow-text-shadow is introduced here, hoping to help you.