Page 1 of 5 Drop shadows. Love 'em or hate 'em, we can't get away from them. Used correctly, they can really jazz up the appearance of flat, dull-looking pages. The trouble is, there are no elements, no attributes, and no currently supported CSS properties that you may use to easily call for a drop shadow. So as web designers, we are required to actually design for drop shadows when they are needed.
Drop shadows make page objects appear to "stand out" from the rest of the content, and they have been employed in print design for ages, where the shadows are typically designed into the page template directly. Once a good looking shadow is created the printer's job is done, but what about the flexible web we work with? Our web pages are not rigid templates, but are instead changeable, via screen resolutions, window widths, system defaults, and user preferences as well. No printer is ever faced with these kinds of drop shadow difficulties, but we are, so we have to be just that much more inventive in our methods if we are to give clients what they demand.
Drop shadows on web pages are not real shadows of course, but since they are supposed to simulate real shadows, they must appear to be cast from an imaginary light-source somewhere behind the viewer. Usually the convention on the web is to have this light-source be above the viewer's left shoulder, causing the shadows to fall below and to the right of the page "object." We will confine ourselves to this type of drop shadow, although we'll also describe ways to change the shadow directions for the various methods.
There are a number of ways drop shadows can be created, using several different methods.
Image 1: Caption text drop shadows applied by the Windows XP desktop. (4X scale)
Very often, it is the text characters themselves that are made to cast shadows, drawing greater attention to them. In fact, most all graphical user interfaces add small amounts of drop shadow to text that may appear in front of unknown backgrounds, such as for desktop icon captions as shown in Image 1. This kind of text shadowing helps prevent the characters from blending into the background and becoming visually obscured by patterns or images behind them.
Image 1 also shows a fancy drop shadow integrated directly into the icon image (note the shadow 'O' behind the red one). If you want a drop shadow of this type, you will need to create it in a graphics program and then meld the image object with the shadow into one compound image. Graphical shadows like this may be cast against almost any imaginary surface, including a wall, a level plane, or even other objects. The only limits are your graphics skills and imagination.
That's all well and good, but for this series we have a different and much simpler drop shadow goal in mind. Our methods will be oriented toward modifying rectangular screen objects so they will seem to be lifted above the page background by a small amount.
Yes, we are talking about boxes, tables, flash movies, complete images, and anything else that forms a rectangle on a web page. Having such utilitarian content boxes throw small shadows is an excellent way to provide visual contrast between page sections, and it usually looks pretty good, too. However, it isn't really feasible to make separate drop shadow images for every possible shape and size of box that might find its way onto your pages, so other methods are needed.
Keywords
drop shadow, sliced image, HTML table, rounded cornered boxes, CSS drop shadow, relative shift, group selector
