Adding shadow to HTML image or DIV


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.

One Response to “Adding shadow to HTML image or DIV”

  1. HTML and CSS Coding Reference | GreenwaysRoad Blog Says:

    [...] drop shadows: Link1 and [...]

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


Follow

Get every new post delivered to your Inbox.

%d bloggers like this: