Simple CSS drop shadows

There are a number of ways to create Web-based drop shadows:

• the graphic-only, Photoshop-filter way;
• the non-standard, Internet Explorer way;
• the standard, but unsupported, W3C way;
• and the safe, easy, and well-supported way outlined in this article.

Using a couple lines of CSS and a bit of HTML, this article's method for text shadow works in the version-four browsers, and degrades safely in older browsers. With the exception of Netscape 4.x (which displays no shadow), the same is true with the box shadow.

A headline with a drop shadowA headline with a drop shadow

The above drop shadow, created by positioning two identical text blocks, can be used on any block-level text element—keep in mind that shadows make text harder to read.

The headline HTML:

<h4 class="container">
A headline with a drop shadow<font color="#FFFFFF" class="text">A headline with a drop shadow</font>
</h4>

The block-level element carries the class container and two versions of the text. The repeated text is set to the right of the original and wrapped with a FONT coloured the same as the parent's background colour making it "invisible" to non-CSS capable browsers.

Note: Because evolt.org strips out the FONT element, a SPAN was used instead. Here is a working example with the FONT element for viewing.

In CSS-enabled browsers, the repeated text (carrying the class text), is positioned absolutely to rest on top of the other text block.

That first block (carrying the class container) is coloured grey and positioned relatively to create the shadow effect.

The headline style:

.container { position: relative; left: 1px; top: 1px; color: #666; }
.text { position: absolute; left: -1px; top: -1px; color: #000;} 

The container class must be positioned relatively using values opposite the text class: 1px instead of -1px. The negative value lets the text class keep the same left margin as the rest of the content.

While text colour should match the body text, the colour and positioning can be changed to affect the shadow's shade and offset.

Try it for yourself with this JavaScript-based shadow maker

Note: The tool may not work in browsers with poor DOM support like Opera, Internet Explorer 4 and Netscape 4.x.

The box shadow

The following box shadow method can be used on tables, images, or any other non-text, block element. The containing element must be a DIV—or a TABLE if you want it to degrade for older browsers.

To the left should be a box with a drop shadow created using two styled DIVs with the box class. The general concept is the same as in the text shadow, though.

The box HTML:

<div class="box" id="boxContainer">
 <div class="box" id="boxContent">
 A drop shadow around a box
 </div>
</div>

Because of the way Netscape 4.x handles some aspects of CSS, two style blocks with different media attributes are needed. The style block containing the interior box's background colour should have that attribute set to screen.

The box style:

.box { float: left; width: 100px; height: 100px; }
#boxContent { border: none; background: #9FC; }

All of the box class and boxContent id attributes can be changed except border: none—this property allows Netscape 4.x to display the contained box as a box.

The second block should call the CSS for the box shadow via the @import method or by setting the style's media attribute to all. Newer browsers will display both the box and the shadow—older browsers will only display a shadowless box.

The style:

#boxContent { position: relative; left: -2px; top: -2px; }
#boxContainer { position: relative; background: #666; margin: 4px; }

Like the text shadow, altering the positioning changes the shadow's offset. The margin affects the spacing between the box and the surrounding text.

Each DIV is styled using an id which allows for a number of boxes with different visual styles.

Wrapping up

The two methods outlined in this piece can be tweaked to create other effects such as glows and blurs—just adjust the positioning and colours.

While fairly simple, basic, these methods are safe—unlike other methods. DOM-capable browsers, for example, could be made to do the same thing using JavaScript, but doing so could cause problems in older browsers.

A last comment

To make the shadows forward-compatible, attach the CSS, Level 2 attribute text-shadow to the elements with shadows. This will save time in the future, and shouldn't hurt the pages now.