Place the image element inside a div element with the class attribute set to imgholder
Set the alignment to the left so that text wraps around the image. Now set the background image of the drop shadow in two background properties. In the first image use an image with an alpha transparency like with an PNG.
div.imgholder {
float:left;
background: url(dropshadow.png) no- repeat bottom right !important;
background url(dropshadow.gif) no- repeat bottom right;
margin: 10px 7px 0 10px !important;
margin: 10px 0 0 5px;
}
As for the image itself, set the margin right and margin bottom properties to define how much of the drop shadow image shows through. Also set a border property as well as padding to create a better effect.
div.imgholder img {
display:block;
position:relative;
background-color:#fff;
border: 1px solid #666;
margin: -3px 5px 5px -3px;
padding: 2px;
}
First of all create a drop shadow image in your paint program, create an image of around 600 x 600px or larger. With the image that large, the technique can accommodate almost any image used in a web page.
The first image uses the !important rule to display the PNG file as a drop shadow, for browsers that don’t support this rule like IE, then we go to the next background property and use the GIF image as the drop shadow instead.
The margin left and bottom controls the distance the drop shadow appears out from the image.