CSS3 Text Effects

« Previous Chapter Next Chapter »

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

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;
}


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 :

Example

Allow long words to be able to brake and wrap onto the next line:

p {word-wrap:break-word;}


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


« Previous Chapter Next Chapter »

Have Any Suggestion? We Are Waiting To Hear from YOU!

Your Query was successfully sent!