n o t e 1 9 . c o m

With CSS you can add a drop shadow to an image. The shadow itself is an image that is displayed under the image for which we want a shadow. The image is displayed over the shadow image and shifted slightly to the top left thus exposing the shadow image. Here is the style sheet for displaying the shadow image as the background image of the DIV that we will display the actual image in.

<style = type"text/css">
div.shadow {
 float:left;
 background: url(dropshadow.gif) no-repeat bottom right;
 margin: 10px 10px 10px 10px;
}
div.shadow img {
  position: relative;
  display: block;
  margin: -3px 6px 6px -3px;
}
</style>

Using the above style-sheet, you can enclose the image inside a div as shown next:

<div class="shadow">
<img src="http://farm1.static.flickr.com/150/378043979_2e14d10d3c_m.jpg"/>
</div>

Click here is how an image with the drop shadow will look like. The shadow, however, only works if you choose a light background for the page.

The same technique can be used to add an image to another DIV. Just create a div specific style-sheet similar to the one above for an image.

div.shadow div {
 position: relative;
 display: block;
 margin: -3px 6px 6px -3px;
 padding: 5px;
 border-width: 1px;
 border-style: solid;
 max-width: 800px;
}

Click here to see an example of a shadow for an entire DIV. The shadow image is a transparent GIF file that has the shadow edges on the right and bottom. The length and the width is fixed (the shadow image file is 978 x 978). That is, the size of the image file limits the size of the DIVs that have a shadow. A more general option is to have three image files: one for the right, corner and the bottom edges.

The book CSS Cookbook includes excellent coverage of what you can do with CSS. The above style-sheets are based on the techniques discussed there.

This entry was posted on February 11, 2007 at 9:23 pm and is filed under Programming. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.