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).
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.
Get Learning PHP, MySQL, JavaScript, and CSS, 2nd Edition now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.