CSS3 Text effects

The CSS3 contains several new text attributes.

In this chapter, you will learn the following text attributes:

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

Browser support

Internet Explorer 10, Firefox, Chrome, Safari, and Opera support the Text-shadow property.

All major browsers support the Word-wrap property.

notes: Internet Explorer 9 and earlier versions do not support the Text-shadow property.

1.text-shadow How to use properties

The Text-shadow property is used as follows.

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

2. . Wrap
4. {
6. Text-shadow:5px 5px 5px Gray;
8. Color:red;
10. Font-size:50px;
12. Font-weight:bold;
14. }

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

2. . Wrap {
4. Text-shadow:10px 10px #f39800,
6. 40px 35px #fff100,
8. 70px 60px #c0ff00;
10. Color:Navy;
12. Font-size:50px;
14. Font-weight:bold;
16. }

3. Automatic line Wrapping

If the word is too long, you may not be able to go beyond an area:

This paragraph contains a very long word:thisisaveryveryveryveryveryverylongword. The long word would break and wrap to the next line.

In CSS3, the Word-wrap property allows you to allow text to force text to wrap-even if that means splitting the word:

This paragraph contains a very long word:this is a very very very very very very long word. The long word would break and wrap to the next line.

CSS Instance code:

Allows splitting of long words and wrapping to the next line:

1. P {word-wrap:break-word;}

CSS3 Text effects