HTML and CSS Reference
In-Depth Information
FIGURE 3.8 A simple text-
shadow highlight.
The syntax is pretty intuitive:
h2 {
text-shadow: 1px 1px 1px white;
The first two unit values set the horizontal and vertical offset of the shadow
from the original text, respectively. Positive values move the shadow right and
down, whereas negative values move the shadow left and up. You can pretty much
use any CSS units for these values. But generally, using pixels is recommended,
because ems and percentages can make shadows move, and you probably don't
want the effect varying with the font size in most cases.
The third unit value sets the amount of blur applied to the shadow. You can
set this to a large value to produce an indistinct shadow below the text or set it to
1px to just make it act as an outline highlight (in which case you could just delete
the third value altogether, because it defaults to 1px when not specified explicitly).
Let's run through a couple of examples. The preceding code is used in my King
Arthur blog example to give the <h2> s not appearing in a background a contrasting
highlight to make them more visible ( Figure 3.8 ).
Search WWH ::

Custom Search