Jump to content

saila.com

Online media matters

Web Design

Simple CSS drop shadows

Although the methods described in this article are still valid, an update has been written that makes drop shadows even easier to do and doesn’t require any HTML modification. “Simple CSS drop shadows, revisited” also examines the CSS drop shadow properties.

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

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.

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

This method will repeat the text in text-based browsers like lynx. To avoid this, write the contents of text using JavaScript or after detecting the browser on the server-side. Also, if standard compliance is a concern (but degradability is not), replace FONT with SPAN.

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.

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.

A drop shadow around a box

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.

Because of an issue with the Macintosh version of IE 5.x, the above style will not create a shadow in that browser. The best solution, if Macintosh compatibility is important, is to position the boxContent absolutely, however this causes problems in Netscape 6.x and other Gecko-based browsers. The workaround is to insert the following JavaScript after the style block:

<script type="text/javascript"><!--
var agt = navigator.userAgent.toLowerCase();
if((agt.indexOf("msie 5") != -1) && (agt.indexOf("mac") != -1)){
document.writeln("")
}
//--></script>

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. If decade-old browsers are not a concern, “Simple CSS drop shadows, revisited” explains how to create these same effects using DOM scripting.

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. Simple CSS drop shadows, revisited” examines these properties in more detail.