The shadowing on these elements indicates a light source coming from the
upper left of an object. Adjust the strengthvalue to lengthen the shadow.
Figure 13-1 was generated from the preceding code:In my view, you’re generally better off creating an image in a graphics applica-
tion like Photoshop if you want to add drop shadows and most other “filter”
effects. In other words, just shadow some text in the graphics application,
and then save the result to a .jpg file. (I think .jpg offers better quality than
the .gif format sometimes used in Web pages.) Then simply import the finished,
polished result into your Web page using the <img>tag. Photoshop and simi-
lar applications specialize in such effects, and the results are generally more
subtle and more fine than you can get by trying to trick things up via CSS.
Browsers aren’t designed to achieve the most sophisticated graphics effects,
and browsers generally cannot compete with the delicacy and variety of the
tools in Photoshop, Picture Publisher, and other graphics applications. CSS
has many uses, but I think you’re asking too much of it when you try to use it
for special graphic effects.For people with slow modems (who turn graphics off) or those who have visual
or other impairments, always including the alttag with each image is good
practice. That way, if someone can’t see your graphics, or is listening to the
text of the page being read out loud, they’ll still get the necessary information.
Here’s an example of how to use alt:<img src=”seashore.jpg” alt=”This is a pleasant, if cliched,
photo of a typical, deserted Aussie beach.”>I don’t use altin this book for clarity; I avoid including code that distracts
from the main point being made in each example. However, you should
include altin your Web pages.Figure 13-1:
Adding
shadows is
one of 16
static filters
you can add
to your page
elements.