CSS3 Text Effects
CSS3 contains several new text features.
In this chapter you will learn about the following text properties:
text-shadow
word-wrap
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
Property
IE
Chrome
Firebox
Safari
Opera
text-shadow
10.0
4.0
3.5
4.0
9.5
word-wrap
5.5
23.0
3.5
6.1
12.1
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 <h1> element:
h1 {
text-shadow: 5px 5px 5px #FF0000;
}
CSS3 Word Wrapping
If a word is too long to fit within an area, it expands outside:
This paragraph contains a very long word:thisisaveryveryveryveryveryverylongword. The long word will break 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 word:thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.
The CSS code is as follows:
Example
Allow long words to be able to break and wrap onto the next line:
p {
word-wrap: break-word;
}
CSS3 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
ليست هناك تعليقات:
إرسال تعليق