Less than full-width box-shadow below

dabblet.css

/**
 * Less than full-width box-shadow below
 */

body {
background: #f06;
min-height: 100%;
}

.box {
	width: 70%;
	height: 200px;
	margin: 20px auto;
	background: #fc0;
	
	/* 	OK, so the -20px is the "inset" distance - the Y offset (30px)
		should be that same absolute number + the desired offset... 
	*/
	box-shadow: 0 30px 0 -20px rgba(0, 0, 0, 0.3);
}

dabblet.html

<div class="box">
	Loads of content to show
</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"separate","fontsize":"80","seethrough":"","prefixfree":"1","page":"all"}