CSS Drop Shadow

A drop shadow is a graphical effect that simulates the shadow of an object and gives the appearance of further dimensions. Though CSS does not have a 'Drop Shadow' property here's how it's possible to leverage style sheets to keep your images separate from their drop shadow. What follows is a tutorial for how to create a drop shadow using CSS. As is the nature of a wiki, please edit, refine and generally make this tutorial more accurate / easy to follow.
==Raw Materials For Creating a Drop Shadow using CSS==
Use the images and code below to recreate this drop shadow effect right now.
===Images===
* Rothschild Photo
* Shadow Image as a GIF
* Shadow Image as a PNG
===CSS Code===
:<style type="text/css">
:.img-shadow { 
:float:left; 
:background: url(ShadowAlpha.png) no-repeat bottom right !important;
:background: url(Shadow.gif) no-repeat bottom right;
:margin: 10px 0 0 10px !important;
:margin: 10px 0 0 5px;
:}
:.img-shadow img {
:display: block;
:position: relative;
:background-color: #fff;
:border: 1px solid #a9a9a9;
:margin: -6px 6px 6px -6px;
:padding: 4px;
:}
:</style>
===XHTML Code===
:<body>
:<div class="img-shadow">
:<img src="Rothschild.gif" alt="Rothschild Photo">
:</div>
:</body>
==Reference Links==
* Easy CSS drop shadows, 1976Design
* CSS Drop Shadows, A List Apart
* CSS Drop Shadow Tests, Phil Baines
* Gestalt Psychology, Wikipedia
* CSS Drop Shadows, W3C
* PNG VS. GIF, W3C
Category:Production