Image Thumbnail w/ Bevel

dabblet.css

/**
 * Image Thumbnail w/ Bevel
 */

#bevel {
	width:384px;
	height:284px;
	border:8px solid;
	border-color:rgba(213,213,213,0.35) rgba(75,75,75,0.35) rgba(48,48,48,0.35) rgba(202,202,202,0.35);	
	-webkit-box-shadow:inset 1px 1px 0 0 rgba(255,255,255,0.35), inset -1px -1px 0 0 rgba(255,255,255,0.20);
	   -moz-box-shadow:inset 1px 1px 0 0 rgba(255,255,255,0.35), inset -1px -1px 0 0 rgba(255,255,255,0.20);
	   	box-shadow:inset 1px 1px 0 0 rgba(255,255,255,0.35), inset -1px -1px 0 0 rgba(255,255,255,0.20);
}
 
#sample_img {
	position:absolute;
	top:50%;
	left:50%;
	margin:-150px 0 0 -200px;
	width:400px;
	height:300px;
	background:url(http://dribbble.com/system/users/31677/screenshots/356283/dribbble-nav.png?1324275833) 0 0 no-repeat;
	border:1px solid;
	border-color:#555 #333 #222 #444;
	-webkit-box-shadow:2px 2px 6px 0 rgba(0,0,0,0.3);	   
	   -moz-box-shadow:2px 2px 6px 0 rgba(0,0,0,0.3);
	   	box-shadow:2px 2px 6px 0 rgba(0,0,0,0.3);
}

dabblet.html

<div id="sample_img">
	<div id="bevel"></div>
</div>

settings.json

{"view":"split","prefixfree":"1","page":"css"}