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.
No one can say who created the first web drop shadow, but these early efforts were all based on the idea of altering an imaged object so that the image also contained an apparent shadow of that image, as with the Opera icon in Image 1. Such effects are still commonly used, but are graphics oriented and thus beyond the scope of this article. The curious can read a good overview of the techniques at Webreference.com.
Aside from pure image techniques, designers found it desirable to have simple shadows along the edges of actual page boxes, and in those days the only tool available was the humble table. The table method works by first creating an image of a box in a graphics program, complete with shadows and rounded corners if desired. This image can be as fancy or plain as needed.
Then the image is sliced up, employing a graphics editing program of some kind. Then, working within a 3x3 celled table, the slices along the edges are placed into the corresponding edge cells while the content goes in the center cell. The result is that the corner cells have images that may be curved and shadowed, and the cells along the middle of each table side have images which cleanly join to the corners visually.
When the center cell content gets wider or taller, those cells that are directly left, right, above, and below the center cell must also enlarge to match the center cell. This happens because any individual row in a table must be of one uniform height, and single columns must similarly have a uniform width. Those side cells have linear segments of the shadow, and are set to always completely fill the cells they are within.
Changes in the dimensions of those side cells will cause the images inside to be stretched so that they always span the distances between the corner cell images. The corner cells never change size. Read Stephanie Sullivan's Creating Rounded Cornered Boxes to see what we are talking about. The table technique may be elaborated, but it still follows the basic approach we have outlined.
This table method works well in modern browsers, but it has a major disadvantage in the fact that a 9-cell table is being used for a visual effect. Having 8 table cells with no content other than semantically meaningless images is not a great idea when search engines or screen readers are considered. Thus, the search began and has continued, for better ways to get the same effects without using tables, and that is where we are headed next.
The sliced image method possesses one feature not available in non-table methods. Sliced images may provide both shadowing and rounded corners in a single reliable and well understood method. Any alternative method usually introduces greater complication in the CSS for the advantage of eliminating the table and its lack of accessibility. You will have to decide whether this trade-off is is acceptable or not.
Once tables have been dropped from consideration, it is also necessary to drop the entire sliced image method as it now stands. True, certain parts of the sliced image method will be employed in the more advanced techniques, but no longer will side images be stretched to fit along the sides of a content box. Only tables can do that properly, so we will need to find different tricks to get what we want.
As this series progresses, more complex and effective drop shadow methods will be covered. But for now, we'll show just the easiest and simplest trick of all, using a pair of nested block elements and a bit of CSS.
As you may know, CSS allows authors to place a color or image on the background of any page element. Backgrounds are generally very safe and bug-free in all modern browsers, including even IE5/Win. This is good because backgrounds are the only tool besides table cells that can create drop shadows on HTML elements. All the methods we will be detailing use backgrounds in one way or another to achieve their effects.
So let's take a look at our "starter" drop shadow method, shall we?
The HTML need for this trick is quite simple, consisting of just two elements, one nested inside another. For our demonstration we'll use a paragraph, and wrap a DIV around that paragraph:
<div>
<p>
"Friends, Romans, Countrymen, lend me your ears..."
</p>
</div>
Code Block 1
Then we add a bit of CSS to these elements:
div {
width: 20em;
background: #bbbbaa;
}
p {
position: relative;
left: -2px;
top: -2px;
background: #e8eef4;
}
Code Block 2
The DIV has a specific width and a background color that will serve as the shadow color. The paragraph nested inside acquires that same width automatically, and is given a specific background color too. The paragraph must have some kind of background so that the underlying DIV will be masked from view.
Then the paragraph is given position: relative, which makes it possible to physically move that paragraph across the page by any specific length while retaining the shape and size of the paragraph. We have chosen to move it up and to the left by applying negative values to those two properties.
"Friends, Romans, Countrymen, lend me your ears..."
The live demo to the left shows the result of the above code. Note how the DIV background color is behind the paragraph, and the paragraph is offset upwards and to the left by 2px. We have also floated the DIV and added some extra styling to the paragraph for a better appearance, but those styles don't affect the basic method.
Some may wonder about using negative margins to achieve this sideways shifting effect. Our testing shows that negative margins only work well when certain box dimensions are defined. Since it is not always desirable to define box dimensions when using some CSS methods or in some page situations, it's just better and easier to stick with relative shifting using the left and right properties instead.
The previous demo is about as simple as a drop shadow method can get, but what appears on screen is more a suggestion of a shadow than something really convincing. Happily, it's easy to add more detail to the shadow simply by using several DIVs instead of just one, gradually increasing the darkness of each DIV background, and progressively shifting each one further than the last.
Here's how the code might look:
The HTML:
<div class="outer">
<div class="middle">
<div class="inner">
<p>
"Friends, Romans, Countrymen, lend me your ears..."
</p>
</div>
</div>
</div>
The CSS:
.outer {width: 20em; background: #ddddee;}
.middle {background: #aaaabb;}
.inner {background: #777788;}
p {background: #e8eef4;}
.middle, .inner, p {
position: relative;
left: -1px;
top: -1px;
}
Code Block 3
"Friends, Romans, Countrymen, lend me your ears..."
By reducing the shifts to 1px each and shading toward lighter shades as the DIVs drop back in the stack, we get a much more subtle and pleasing effect. Note that the last rule block is a group selector, so each element in the selector receives the style declarations defined following the selector. It's a form of CSS shorthand coding, used when several different elements are to have the same set of styles applied to them.
Image 2: Detail of lower left corner (6X scale)
Be aware that while this drop shadow method is easily extended with more DIVs, doing too much can add a lot of extra markup, and the sharp diagonals of the upper right and lower left corners as shown in Image 2 will become more obvious.
Another drawback is the need to have a solid page background color and to select shadow colors that blend into that page background color. A patterned page background will not look good at all behind this method, since the DIV backgrounds are completely opaque and will mask off anything that falls behind them.
Suppose you want the shadow to fall to the left instead of the right. Doing that is as simple as changing those left properties into right properties. This way the relative offsets pull each successive child element further to the right, and of course upwards as before, leaving the shadow hanging out to the left. We'll also add subtle right and top 1px borders to the paragraph as an embellishment, which enhances the three-dimensional effect:
.middle, .inner, p {
position: relative;
right: -1px;
top: -1px;
}
p {
background: #e8eef4;
border-left: 1px solid #ccccdd;
border-top: 1px solid #ccccdd;
}
Code Block 4
"Friends, Romans, Countrymen, lend me your ears..."
As you can see, modifying the method is extremely easy, works well, and also has the advantage of being very lightweight on the bandwidth budget. The only real weakness of the method is the appearance itself, which may or may not be good enough for you or your clients.
Some may feel that these extra DIVs are in essence no different than the 9-cell table method, as far as adding unnecessary HTML markup is concerned. While it is true that this method adds extra DIVs, there is a real difference between the table and non-table methods.
A table surrounds the content with a lot of cells with associated real (but meaningless) images and table markup, while the DIV methods we will cover all keep their DIV start and end tags in two tight little groups. These tag groups are composed entirely of semantically-null DIV elements, and so will be totally ignored by search engines and screen readers, leaving only the paragraph or other real content within to be parsed by those agents.
Thus, the CSS drop shadow methods are far cleaner than the table method, both code-wise and in a purely semantic sense. The CSS methods are also far easier to modify later.
This simple drop shadow method is easy and fairly safe, but has limits. In the next segment of the series we will describe better-looking but more complex methods, and we'll also discuss some of the side issues you will need to deal with when applying such methods. Stay tuned!
Keywords
drop shadow, sliced image, HTML table, rounded cornered boxes, CSS drop shadow, relative shift, group selector
