Applying Dimensional Effects: text-shadow in CSS3

The ability to apply drop shadows to text using the text-shadow property has
been around for a long time; Safari first implemented it in version 1.1, which
was released in 2005. So you might be wondering why I am discussing it in a
book on CSS3. As with the font properties in the previous chapter, text-shadow

was dropped from CSS2.1 due to lack of implementation, but this property
has been reinstated in the CSS3 spec and recently implemented in Firefox
and Opera.

The position of the shadow is set using the x and y coordinates that I just
introduced. The simplest form of the syntax accepts two values: x to set the
horizontal distance from the text (known as the x-offset) and y to set the verti-
cal distance (the y-offset):

E { text-shadow: x y; }

By default, the shadow will be the color that it inherited from its parent
(usually black), so if you want to specify a different color, you need to pro-
vide a value for that, such as:

E { text-shadow: x y color; }

Here’s an example of a gray (hex code #BBB) drop shadow located 3px to
the right and 3px down from the original image:

h1 { text-shadow: 3px 3px #BBB; }


You don’t have to provide positive integers as offset values; you can use
both 0 (zero) and negative numbers to get different effects. Here are a few
examples:

.one { text-shadow: -3px -3px #BBB; }
.two { text-shadow: -5px 3px #BBB; }
.three { text-shadow: -5px 0 #BBB; }


The first (top) example uses negative values for both axes, so the shadow
is rendered above and to the left of the text. The next (middle) example uses
a negative value for the x-axis and a positive value for the y, so the shadow
renders below and to the left. The final (bottom) example has a negative
value for the x and a value of 0 for y, so the shadow renders to the left and on
the same baseline.