Here I am going to tell how to add a shadow below any image by using simple CSS and html.  Below is the image how it looks finally.

 

Here is the CSS code to get the Drop Shadow effect using a single image

<pre>/* SHADOWS */

.shadow_120{
	background:#FFF url(images/shadow_120.png) no-repeat center bottom;
	padding:0 0 20px 0;
}

.shadow_200{
	background:#FFF url(images/shadow_200.png) no-repeat center bottom;
	padding:0 0 18px 0;
}

.shadow_240{
	background:#FFF url(images/shadow_240.png) no-repeat center bottom;
	padding:0 0 20px 0;
}

.shadow_340{
	background:#FFF url(images/shadow_340.png) no-repeat center bottom;
	padding:0 0 20px 0;
}

.shadow_280{
	background:#FFF url(images/shadow_280.png) no-repeat center bottom;
	padding:0 0 20px 0;
}

.shadow_440{
	background:#FFF url(images/shadow_440.png) no-repeat center bottom;
	padding:0 0 20px 0;
}

.shadow_600{
	background:#FFF url(images/shadow_600.png) no-repeat center bottom;
	padding:0 0 20px 0;
}
</pre>

View Demo Download

Please don’t forget to share and subscribe to latest updates of the blog.

Thanks!

If you enjoyed this article, Get email updates (It’s Free)
http://w3lessons.info/wp-content/uploads/2012/02/image-drop-shadow11.pnghttp://w3lessons.info/wp-content/uploads/2012/02/image-drop-shadow11-150x150.pngKarthikeyan KCSS3FreebiesWeb DesignCascading Style Sheets,css drop shadow,tips & tricks
Here I am going to tell how to add a shadow below any image by using simple CSS and html.  Below is the image how it looks finally. Here is the CSS code to get the Drop Shadow effect using a single imageView Demo DownloadPlease don’t forget to share and...