Plaats de html code ergens in de body sectie van jouw pagina, en plaats de css-code in de head-sectie van jouw pagina. Je kan even de jpg-afbeelding "lenen" om de procedure uit te testen. Je kan eenvoudig de shadow/border-kleuren en het "hover-gedrag" wijzigen in de code. De html en de stylesheet zijn cross browser. Als je deze procedure in een javascript wilt gebruiken kan je even kijken op drop-shadow-script.html.
<img class="drop_shadow" src='http://static.dns5.nl/drop-shadow.jpg' width="222" height="222" alt="drop schaduw" />
<style type="text/css">
img.drop_shadow{
display:block;
border-left:3px solid #333;
border-top:2px solid #333;
border-bottom:2px solid #888;
border-right:2px solid #888;
-moz-box-shadow:10px 10px 5px #888;
-webkit-box-shadow: 10px 10px 5px #888;
box-shadow:10px 10px 5px #888}
img.drop_shadow:hover{
border-left:4px solid #333;
border-top:3px solid #333;
border-bottom:1px solid #333;
border-right:0px solid #333;
-moz-box-shadow:10px 10px 5px #555;
-webkit-box-shadow: 10px 10px 5px #555;
box-shadow:10px 10px 5px #555}
</style>
<!--[if lt IE 9]>
<style type="text/css">
img.drop_shadow{
border-bottom:4px solid #444;
border-right:2px solid #444;
-ms-filter: "progid:DXImageTransform.Microsoft.Glow(color=black,strength=3) progid:DXImageTransform.Microsoft.Shadow(color=#333333,direction=145,strength=8)";
filter: progid:DXImageTransform.Microsoft.Glow(color=black,strength=3) progid:DXImageTransform.Microsoft.Shadow(color=#333333,direction=145,strength=8)}
img.drop_shadow:hover{
border-top:3px solid #333;
border-bottom:3px solid #333;
border-right:1px solid #222;
border-left:2px solid #222;
filter: progid:DXImageTransform.Microsoft.Glow(color=black,strength=3) progid:DXImageTransform.Microsoft.Shadow(color=#333333,direction=115,strength=8)}
</style>
<![endif]-->