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:

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;

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.

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.


About Cameron
I'm a final year Computer Science/Information Systems major. Already finished my BA in Politics/Philosophy. I do web and software freelance on the side, while I finish studying. Hoping to be self-employed by the end of my degree, otherwise off into the real-world I go....

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: