CSS3 Text Effects(Fg. 1)

    CSS3 contains several new text features.

In this chapter you will learn about the following text properties:

  • Text Shadow
  • Text Wrap

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

All major browsers support the word-wrap property.

Note: Internet Explorer 9 and earlier versions, does not support the text-shadow property.

Fg. 1 (CSS3 Text Effects)

h1
{
text-shadow:2px 2px 8px #FF0000;
}
p.test
{
word-wrap:break-word;
}
h1
{
color:white;
text-shadow:2px 2px 4px #000000;
}

Fg. 2.1 (CSS3 Text Shadow)

h1
{
text-shadow: 5px 5px 5px #FF0000;
}

Fg. 2.2 (CSS3 Text Shadow)

h1
{
color:white;
text-shadow:2px 2px 4px #000000;
}

CSS3 Text Shadow(Fg.s 2)

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.

This Text Has Shadows

Syntax

text-shadow: h-shadow v-shadow blur color;

The text-shadow property attaches one or more shadows to text. The property is a comma-separated list of shadows, each specified by 2 or 3 length values and an optional color. Omitted lengths are 0. (Fg. 2.1 & Fg. 2.2)

CSS3 Word Wrapping(Fg.s 3)

If a word is too long to fit within an area, it expands outside. 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.
This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.

Syntax

word-wrap: normal|break-word;

(Fg. 3.1 & Fg. 3.2)

Fg. 3.1 (CSS3 Word Wrapping)

p
{
word-wrap:break-word;
}

Fg. 3.2 (CSS3 Word Wrapping)

p
{
word-wrap:normal;
}