CSS3 - Text Effects
CSS3 contains several new text features. In this chapter you will learn about the following text properties:
CSS3 Text Effects Browser Support
| Property |
Browser Support |
| text-shadow |
|
|
|
|
|
| word-wrap |
|
|
|
|
|
Internet Explorer does not yet support the text-shadow property.
Firefox, Chrome, Safari, and Opera support the text-shadow property.
All major browsers support the word-wrap property.
In CSS3, the text-shadow property applies shadow to text.
Text shadow effect!
You specify the horizontal shadow, the vertical shadow, the blur distance, and the color of the shadow:
CSS3 Text Shadow Example
Add a shadow to a header:
h1
{
text-shadow: 5px 5px 5px #FF0000;
}
If a word is too long to fit within an area, it expands outside:
This paragraph contains a very long vord:
thisisaveryveryveryveryveryverylongword. The long word will brake and wrap to the next line.
In CSS3, the word-wrap property allows you to force the text to wrap - even if it means splitting it in the middle of a word:
This paragraph contains a very long vord: thisisaveryveryveryveryveryverylongword. The long word will brake and wrap to the next line.
CSS3 Word Wrap Example
Allow long words to be able to brake and wrap onto the next line:
p {word-wrap:break-word;}
