CSS Drop Shadows

From Docupedia

Written By: Bryan Rite

Date: 01/21/2007

Contents 1 Overview 2 The Setup 2.1 The Files 2.2 The CSS Code 2.3 The XHTML Code 3 Possible Problems

Overview

Well, Jeff is in the middle of designing up some website and asked me how I did the drop shadows on my travel blog website Footstops.com so I decided to put it up on here. They work in every browser I've tried (IE6,7 Firefox1,2 Safari, Konqueror, Camino, Opera), and work on any background. IE 6 doesn't by default display transparent PNGs properly but the drop shadow is designed to degrade gracefully and they don't show up in IE6.

The Setup

The drop shadow can be applied to any div that has a fixed width or is floating. This is not ideal but necessary because of the way most browsers render divs.

The Files

Aside from that, all you need are the files:

 Fade.zip - Contains 3 transparent PNGs.

The CSS Code

Copy the following code in a CSS file:

 html>body .outsideRight {background:url(PATH/upperrightfade.png) right top no-repeat;}
 html>body .outsideLeft {background:url(PATH/lowerleftfade.png) left bottom no-repeat;padding:8px 0 0 8px;}
 html>body .mainShadow {background:url(PATH/shadow.png) bottom right;}
 .mainShadow img {vertical-align:bottom;}
 html>body .innerShadow {position:relative;left: -8px;top: -8px;}

The XHTML Code

If your page is referencing the CSS correctly the XHTML code is pretty simple. You will just be applying 4 divs around whatever you want to have the shadow around it. The class that is already on the div you want to wrap is applied to the outermost div. Say you have a div that looks like this:

 <div class="example">...</div>

Simply to have a drop shadow surround that div, you change it to:

 <div class="outsideRight example">
     <div class="outsideLeft">
        <div class="mainShadow">
           <div class="innerShadow">
              ...
  </div></div></div></div>

Notice we add example to the outermost div, and add 3 inner divs.

Possible Problems

The only problem that can really go wrong is the example div isn't a float or fixed width, or has some weird padding or margins that will mess up the inner divs you just added.

Here is a possible example class that would work fine:

 .example {padding:0; float:left; margin: 10px 5px;}

Edit as necessary.

- Bryan Rite 17:03, 21 January 2007 (EST)