De illusie criëeren van een schaduw op bepaalde elementen is niets nieuws meer, het kan op verschilende manieren worden verkregen, maar toch wel hoofdzakelijk met afbeelding(en).
Deze versie gaat een stapje verder, probeer het maar eens uit.

HTML

<div class="dropShadow dropBR">
<div class="drop1">
	<div>
		<div></div>
	</div>
</div>
<div class="drop2">
	<div>
		<div></div>
	</div>
</div>
<div class="drop3">
	<div>
		<div></div>
	</div>
</div>
<div class="drop4">
	<div>
		<div></div>
	</div>
</div>
<div class="drop5">
	<div>
		<div></div>
	</div>
</div>
<div class="dropContent">
<img src="images/zeldman.jpg">
</div>
</div>

CSS

.dropShadow {
position:relative;
z-index:1;
float:left;
}
/*border boxes; inside-->outside*/
.dropShadow .drop1, .dropShadow .drop2, .dropShadow .drop3,
.dropShadow .drop4, .dropShadow .drop5 {
position:absolute;
right:0;
bottom:0;
width:100%;
height:100%;
}
.dropShadow .drop1 { opacity:0.5; }
.dropShadow .drop2 { opacity:0.4; }
.dropShadow .drop3 { opacity:0.3; }
.dropShadow .drop4 { opacity:0.2; }
.dropShadow .drop5 { opacity:0.1; }
.dropShadow.dropBR .drop1, .dropShadow.dropBR .drop2,
.dropShadow.dropBR .drop3, .dropShadow.dropBR .drop4,
.dropShadow.dropBR .drop5 {
top:0; left:0;/*shadow positioned bottom-right*/
}
.dropShadow.dropBL .drop1, .dropShadow.dropBL .drop2,
.dropShadow.dropBL .drop3, .dropShadow.dropBL .drop4,
.dropShadow.dropBL .drop5 {
top:0; left:-16px;/*shadow positioned bottom-left*/
}
.dropShadow.dropTR .drop1, .dropShadow.dropTR .drop2,
.dropShadow.dropTR .drop3, .dropShadow.dropTR .drop4,
.dropShadow.dropTR .drop5 {
top:-16px; left:0;/*shadow positioned top-right*/
}
.dropShadow.dropTL .drop1, .dropShadow.dropTL .drop2,
.dropShadow.dropTL .drop3, .dropShadow.dropTL .drop4,
.dropShadow.dropTL .drop5 {
top:-16px; left:-16px;/*shadow positioned top-left*/
}
/*top & bottom borders*/
.dropShadow .drop1 div, .dropShadow .drop2 div,
.dropShadow .drop3 div, .dropShadow .drop4 div,
.dropShadow .drop5 div {
position:absolute;
top:8px;
right:0;
bottom:0;
left:8px;
border-style:solid;
border-color:#999;
}
.dropShadow .drop1 div {
margin:7px -1px -1px 7px;
border-width:1px 0 1px 0;
background-color:#999;
}
.dropShadow .drop2 div {
margin:6px -2px -2px 6px;
border-width:1px 0 1px 0;
}
.dropShadow .drop3 div {
margin:4px -4px -4px 4px;
border-width:2px 0 2px 0;
}
.dropShadow .drop4 div {
margin:2px -6px -6px 2px;
border-width:2px 0 2px 0;
}
.dropShadow .drop5 div {
margin:0 -8px -8px 0;
border-width:2px 0 2px 0;
}
/*left & right borders*/
.dropShadow .drop1 div div, .dropShadow .drop2 div div,
.dropShadow .drop3 div div, .dropShadow .drop4 div div,
.dropShadow .drop5 div div {
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
margin:0;
}
.dropShadow .drop1 div div { border-width:0 1px 0 1px; }
.dropShadow .drop2 div div { border-width:0 1px 0 1px; }
.dropShadow .drop3 div div { border-width:0 2px 0 2px; }
.dropShadow .drop4 div div { border-width:0 2px 0 2px; }
.dropShadow .drop5 div div { border-width:0 2px 0 2px; }
/*content being shadowed*/
.dropShadow .dropContent {
position:relative;
z-index:1;
border:1px solid black;
padding:2px;
background-color:#fff;
}