css based drop shadow effect

The drop-shadow effect is an used to provide that little bit extra to the formatting of your blocks. The following is a basic demonstration of how it can be achieved through the simple application of some CSS formatting. This removes the need for imagery to be cached, and enables the dimensions of the block in question to be altered without hassles. In turn this provides a decrease in the bandwidth requirements of your site which, if there are a large amount of blocks with shadows or other effects, can mount up very quickly in graphics intensive sites.

I did originally find this code elsewhere when I was doing some web design work, but I don’t recollect where from. I don’t claim original credit for this, and if it is yours, I apologise and and if you contact me I will reference you here immediately.

The CSS required is:

<style>
body {
margin: 0px;
padding: 20px;
font-family: verdana;
font-size: 12px;
}
#shadow-container {
position: relative;
left: 3px;
top: 3px;
margin-right: 3px;
margin-bottom: 3px;
}
#shadow-container .shadow2,
#shadow-container .shadow3,
#shadow-container .container {
position: relative;
left: -1px;
top: -1px;
}
#shadow-container .shadow1 {
background: #F1F0F1;
}
#shadow-container .shadow2 {
background: #DBDADB;
}
#shadow-container .shadow3 {
background: #B8B6B8;
}
#shadow-container .container {
background: #ffffff;
border: 1px solid #fff;
padding: 10px;
</style>

and then this is applied within the HTML as so:

<div id="shadow-container">
<div class="shadow1">
<div class="shadow2">
<div class="shadow3">
<div class="container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sem enim, iaculis eget tincidunt quis, ultrices vel tellus. Quisque semper ante eu turpis convallis eget pharetra ligula pulvinar. Vivamus quis neque mauris. Praesent sit amet felis id lorem fringilla adipiscing ut ut felis. Etiam at lectus elit, vehicula porta ipsum. Nullam in turpis mi, et interdum sapien. Cras vehicula, eros eget rhoncus hendrerit, ante massa tincidunt nulla, sed iaculis quam ipsum congue risus. Integer id velit erat, vitae malesuada ipsum. Maecenas pretium ligula ut ipsum laoreet in tristique mauris accumsan. Cras lacinia justo quis tortor fermentum adipiscing. Donec consectetur eros sit amet ante lacinia venenatis. Aliquam erat volutpat. Morbi in suscipit dolor. Vivamus pellentesque fermentum lorem in bibendum. Vestibulum porta commodo fermentum.
</div>
</div>
</div>
</div>
</div>

And there you have it, a CSS define drop-shadow for any blocks you wish to assign this to. This works equally well with rounded blocks, ie using:

-border-radius: 1em;
-moz-border-radius: 1em;
-webkit-border-radius: 1em;
// -opera-border-radius: 1em;
// -khtml-border-radius: 1em;

as long as you allocate this rounding to each element of the shadow-container family.