Jonas Claesson showed me this cool hack for simulating a drop shadow effect on a document in css.

Basically it takes drop shadow images, and repeats them around the border of your display image by placing in in north, south, east, west corners of your image.
You then plop them in using css ids and background images.

The result looks something like this:

And the code looks something like this:

html

<!DOCTYPE html> 
<html> 
<head> 
  <title>dropShadowViaClassBackgroundImage</title>
  <link href="css/classBackgroundImg.css" media="screen" rel="stylesheet" type="text/css" />
</head> 

The following is an example of how you can use classes to place background images.

<table cellspacing="0" cellpadding="0" id="previewTable">
<tr>
    <td id="nw"></td>
    <td id="n"></td>
    <td id="ne"></td>
</tr>
<tr>
    <td id="w"></td>
    <td id="previewContent">

    <div id="previewForm">

        <table style="margin-top:15px">
            <tr >
                <td><span class="headerBold">Summary:</span></td>
                <td><div  class="header">Do your stuff here</div></td>
            </tr>
        </table>

    </div>

    <td id="e"></td>
</tr>
<tr>
    <td id="sw"></td>
    <td id="s"></td>
    <td id="se"></td>
</tr>

</table>
</html>

css

#previewTable
{
    margin: 20px auto;
    width: 900px
}

#previewForm *
{
    font-family: verdana, serif
}

/* This is for the drop-shadow effect around the document*/
#nw, #ne, #sw, #se
{
    height: 15px;
    width: 15px;
}

#nw {background-image: url('../images/nw.png');}

#n {background-image: url('../images/n.png');}

#ne {background-image: url('../images/ne.png');}

#w {background-image: url('../images/left.png');}

#e {background-image: url('../images/right.png');}

#sw {background: url('../images/sw.png') repeat-x;}

#s {background: url('../images/s.png') repeat-x;}

#se {background: url('../images/se.png') repeat-x;}

You can download the code and check it out here:

git@github.com:rasmus4200/webtips.git