Drop Shadow in Images : No extra markup

Drop Shadows adds extra glare to any design. They can be easily accomplished in any graphic editor, however its a little tricky in web programming. In this post I'll walk you through various ways in which you can add shadows to images without any extra markup used.
In all cases i'll use the same HTML code for showing Image.

<img src="image.jpg" class="thumbnail" />

CSS 3

In the latest public working draft we have a box-shadow property. This property can be used to draw a drop-shadow for a CSS box.

The CSS for the above example is :

.thumbnail{
    padding:4px;
    border:1px solid #DDD;
    -moz-box-shadow: 5px 5px 7px #999;
    box-shadow: 5px 5px 7px #999;
    -webkit-box-shadow: 5px 5px 7px #999;
}

Good naa !!!

But the problem with this implementation is that it doesn't work in IE. The Box Shadow property is supported by only :
+ Firefox 3.5
+ Safari (3.2.1)
+ Google Chrome 2
So its up to you whether you want to ignore IE users or not.

Now lets see other approach.

Using Background Shadow Image

In this approach we'll be using an extra image in background that will give shadow effect. This technique is also illustrated here "CSS Drop Shadows".

In this case the CSS used is:

.thumbnail{
    width:250px;
    height:250px;
    padding:4px 14px 14px 4px;
    background:transparent url('image-bg.png') no-repeat 0 0;
}

Some other implementations are

Demo 1

Demo 2

Hope this article will give more ideas for similar implementation.

Happy Coding!!!!

Other Posts which you may like:

1. Sexy Tooltip using CSS3 (no images)
2. Beautiful Thumbnail Hover Effect : Using Mootools
3. Another Beautiful Thumbnail Hover Effect : Using Mootools
4. Beautiful and Simple Buttons with CSS
5. How to Create a Simple Slideshow using Mootools / JQuery