CSS3 Learning Summary 1--CSS3 text effect

CSS3 Text Effects

• 1. Text-shadow
• 2. Word-wrap

Text-shadow How to use properties

The Text-shadow property is used as follows.

Text-shadow:length Length Length Color

Where the first three length refers to the shadow away from the horizontal distance of the text, the shadow away from the vertical distance of the text and the blur radius of the shadow, color refers to the colors of the shadow.

The following is an example of the use of a Text-shadow property. In this example, a gray shadow is drawn for a piece of red text. Where the shadow leaves the text in both the horizontal and vertical directions, the distance is 5 pixels.

. calssname{text-shadow:5px 5px 5px Gray;　　color:red;　　font-size:50px; Font-weight:bold;}

Displacement Distance

The first two parameters in the parameters used by the Text-shadow property are the distance between the horizontal displacement of the shadow leaving the text and the longitudinal displacement.

You must specify both parameters when using the Text-shadow property, and you can specify a negative value for both parameters .

Example:

. classname{text-shadow:-15px 10px 5px Gray;　　Color:navy;　　font-size:50px; Font-weight:bold;}

　　

Specify multiple Shadows

You can use the Text-shadow property to assign multiple shadows to the text, and use a different color for each shadow.

Multiple shadows are delimited with commas when multiple shadows are specified. So far, only the Firefox browser, Chrome browser and Opera browser have supported this feature.

Sample Code

The orange, yellow, and green shades are specified in turn for the text, and the appropriate positions are assigned to the shadows.

. classname{   text-shadow:10px 10px #f39800, 40px 35px #fff100, 70px 60px #c0ff00; color:navy;font-size:50p X;font-weight:bold;}

　　

Wrap Line

In CSS3, the Word-wrap property allows you to allow text to force text to wrap-even if it means that the word is split.

p {Word-wrap:break-word;}

　　

CSS3 Learning Summary 1--CSS3 text effect