CSS3 Text Effects
CSS3 contains several new text features.
In this chapter you will learn about the following text properties:
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.
CSS3 Text Shadow
In CSS3, the text-shadow property applies shadow to text.
You specify the horizontal shadow, the vertical shadow, the blur distance, and the color of the shadow:
Example
Add a shadow to a header:
h1
{
text-shadow: 5px 5px 5px #FF0000;
} |
Try it yourself » |
CSS3 Word Wrapping
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.
The CSS code is as follows:
Example
Allow long words to be able to brake and wrap onto the next line:
| p {word-wrap:break-word;} |
Try it yourself » |
New Text Properties
| Property | Description | CSS |
|---|
| hanging-punctuation | Specifies whether a punctuation character may be placed outside the line box | 3 |
| punctuation-trim | Specifies whether a punctuation character should be trimmed | 3 |
| text-align-last | Describes how the last line of a block or a line right before a forced line break is aligned when text-align is "justify" | 3 |
| text-emphasis | Applies emphasis marks, and the foreground color of the emphasis marks, to the element's text | 3 |
| text-justify | Specifies the justification method used when text-align is "justify" | 3 |
| text-outline | Specifies a text outline | 3 |
| text-overflow | Specifies what should happen when text overflows the containing element | 3 |
| text-shadow | Adds shadow to text | 3 |
| text-wrap | Specifies line breaking rules for text | 3 |
| word-break | Specifies line breaking rules for non-CJK scripts | 3 |
| word-wrap | Allows long, unbreakable words to be broken and wrap to the next line | 3
|
No comments:
Post a Comment