Drop shadows without graphics

Drop shadows can be a useful design element for adding depth and variety to your webpage designs, but tranditional techniques for adding drop shadows have required adding images to your pages, resulting in some slowing of download times. Here's a technique for creating drop shadows using CSS which does not require images, and which allows for dynamically sizing based on the length of your content.

First, here's the output we're going to create:

And here's the code:

<div style="position:relative; top:7px; left:7px; width:170px; background:#bdf;">
<div style="position:relative; top:-7px; left:-7px; width:170px; background:#9cf;">
<div style="border:1px dotted #69c; padding:5px;">
This box has a fixed width of 170 pixels, but its length is determined by the amount of content in it.
</div>
</div>
</div>

The first div is the drop show. It uses relative positioning to move 7 pixels down and to the left. The second sits on top of the drop shadow, and uses negative relative positioning to move back to the original location within the flow of the page. Notice how the drop shadow div automatically grows to the same length as the content div, causing it to extend 7 pixels below the content div. That's the main thrust of this example.

But then there's the question of the innermost div. Why do we use another div to add padding and a border instead of simply putting those settings in the content div? In a perfect world, we wouldn't have to, but in the real world, different browsers interpret CSS a little differently. In some, the padding and border widths are counted as part of the width of the div--as padding and border widths increase, the width of the content area decreases. In others, as the padding and border widths increase, the overall width of the div increases. Using a separate div enables us to ensure that the overall width of the div is exactly what we want it to be in all browsers.

Reader Comment:

Anonymous said:

This is pretty cool!

(join the conversation below)