Learning PHP, MySQL, JavaScript, and CSS, 2nd Edition

Text Effects

A number of new effects can now be applied to text with the help of CSS3, including text shadows, text overlapping, and word wrapping.

The text-shadow Property

This property is similar to the box-shadow property and takes the same set of arguments: a horizontal and vertical offset, an amount for the blurring, and the color to use. For example, the following declaration offsets the shadow by 3 pixels both horizontally and vertically, and displays the shadow in dark gray, with a blurring of 4 pixels:

text-shadow:3px 3px 4px #444;

The result of this declaration looks like Figure 19-6; it works in recent versions of all major browsers (but not IE9 or lower).

Figure 19-6. Applying a shadow to text

The text-overflow Property

When using any of the CSS overflow properties with a value of hidden, you can also use the text-overflow property to place an ellipsis (three dots) just before the cutoff to indicate that some text has been truncated, like this:

text-overflow:ellipsis;

Without this property, when the text “To be, or not to be. That is the question.” is truncated, the result will look like Figure 19-7, but with the declaration applied the result is like Figure 19-8.

Figure 19-7. The text is automatically truncated

Figure 19-8. Instead of being cut off, the text trails off using an ellipsis ...