stacked images

dabblet.css

/**
 * stacked images
 * compare: http://webdesignerwall.com/tutorials/css3-image-styles
 * 
 */
 
 .roundImage {
 	border-radius: 5px; 
 	margin: 0 0 0 9px;
 	display:block; 
 	float: left;
 	overflow: hidden; 
 	position: relative;
 	box-shadow: 0 7px 5px -5px rgba(0,0,0,0.9);


}
 
.roundImage:after{
	content: " ";
	position: absolute;
	top:0;right:0; bottom:0;left:0;
	border-radius: 5px;
	box-shadow: 
	inset 0 2px 0px rgba(255,255,255,0.4),
	inset 0 -1px 0px rgba(0,0,0,1),
	inset 0 -2px 0px 0 rgba(255,255,255,1),
	inset 0 -4px 0px rgba(0,0,0,1),	
	inset 0 -5px 0px 0 rgba(255,255,255,1),
	inset 0 -7px 0px rgba(0,0,0,1),
	inset 0 -8px 0px 0 rgba(255,255,255,1),
	0 0 1px 10px #fff; 
	;
 
}
 .roundImage img{vertical-align: bottom;}

dabblet.html

<div class="roundImage">
	<img src="http://lorempixel.com/80/80/animals/5/"/>
</div>
<div class="roundImage">
	<img src="http://lorempixel.com/80/80/animals/4/"/>
</div>
<div class="roundImage">
	<img src="http://lorempixel.com/80/80/animals/3/"/>
</div>

<div class="roundImage">
	<img src="http://lorempixel.com/80/80/animals/1/"/>
</div>

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}