Quick tip: Drop shadows

I’ve put together this quick example of how to create a drop shadow effect for use within a web page. This example has been tested in IE7, Firefox, Opera and Safari however, because it uses semi-transparent png’s, the images will need to be replaced for it to work in IE6 so that they are aliased against the background colour.

The reason for using png’s within this example was to ensure that the drop shadow would display correctly against all backgrounds. Simply change the background colour of the body to see how this works.

The HTML

<div>
<span class="topleft"></span>
<span class="top"></span>
<span class="topright"></span>
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin libero leo, hendrerit sit amet, adipiscing et, pretium id, tortor. Donec eu felis bibendum dui suscipit vestibulum. Nunc laoreet lacinia enim. Sed sapien neque, porta nec, commodo ac, cursus sed, nibh. Aenean hendrerit cursus sapien. Donec faucibus, massa quis laoreet vestibulum, magna mauris ornare purus, eu faucibus sapien mi vitae sem. Donec sodales, nulla a tincidunt porttitor, tellus tortor tincidunt ante, sed viverra orci ligula sit amet nulla. Sed vitae augue. Praesent ac pede. Nulla facilisi. Integer purus elit, tempor non, tristique scelerisque, mattis porttitor, magna. Mauris mattis, lectus vitae porta malesuada, purus ante hendrerit mauris, a imperdiet risus mi quis lacus. Vestibulum nisl sem, iaculis et, feugiat a, varius at, mi.
</p>
</div>
<span class="bottomleft"></span>
<span class="bottom"></span>
<span class="bottomright"></span>
</div>

The CSS

* {
padding: 0; margin: 0;
}
body {
margin: 10px auto;
width: 700px;
font-family: arial, verdana, helvetica, sans-serif;
font-size: 80%;
background: #999999;
}
p {
margin-right: 15px;
padding: 0.5em 1em;
background-color: #FFFFFF;
}
.top {
float: left;
width: 676px;
background-image: url(top.png);
height: 9px;
font-size: 0;
}
.topleft {
float: left;
width: 9px;
height: 9px;
font-size: 0;
background-image: url(top-left.png);
}
.topright {
float: right;
width: 15px;
height: 9px;
font-size: 0;
background-image: url(top-right.png);
}
.content {
float: left;
width: 700px;
background-repeat: repeat-y;
background-position: right;
background-image: url(right.png);
}
.bottom {
float: left;
width: 676px;
background-image: url(bottom.png);
height: 16px;
font-size: 0;
}
.bottomleft {
float: left;
width: 9px;
height: 16px;
font-size: 0;
background-image: url(bottom-left.png);
}
.bottomright {
float: right;
width: 15px;
height: 16px;
font-size: 0;
background-image: url(bottom-right.png);
}

Download this dropshadow example

dropshadow.zip