afraser · February 4, 2012 17:37
diff --git a/dabblet.css b/dabblet.css
 /**
 * The first commented line is your dabblet’s title
 */

 body{
 	background: #f06;
 	background: linear-gradient(0deg, #f06, yellow);
 	min-height:100%;
 }
 /*Note that the styles here are using 
 -prefix-free to avoid having to add 
 -webkit, -moz etc for transform and box-shadow
 */
 .content_top{
 	height: 400px;
 	/*background-color: rgba(0,255,0,0.3);	*/
 }
 .content_bottom{
 	color: #FFF;
 	z-index: 100;
 	/*background-color: rgba(0,0,255,0.3);*/
 }
 #bottom {
 	position: fixed;
 	background-color: rgba(0,0,0,0.3);
 	transform: rotate(8deg);
 	left: -60px;
 	top: 400px;
 	width: 120%;
 	height: 100%;
 	box-shadow: -5px -5px 15px rgba(0,0,0,0.2);
 	z-index: -1;
 }
diff --git a/dabblet.html b/dabblet.html
 <!-- content to be placed inside <body>…</body> -->

 <div class="content_top">content top</div>
 <div class="content_bottom">content bottom</div>
 <div id="bottom"></div>
diff --git a/settings.json b/settings.json
 {"view":"split-vertical","prefixfree":"1","page":"css"}
	/**
	* The first commented line is your dabblet’s title
	*/

	body{
	background: #f06;
	background: linear-gradient(0deg, #f06, yellow);
	min-height:100%;
	}
	/*Note that the styles here are using
	-prefix-free to avoid having to add
	-webkit, -moz etc for transform and box-shadow
	*/
	.content_top{
	height: 400px;
	/background-color: rgba(0,255,0,0.3); /
	}
	.content_bottom{
	color: #FFF;
	z-index: 100;
	/background-color: rgba(0,0,255,0.3);/
	}
	#bottom {
	position: fixed;
	background-color: rgba(0,0,0,0.3);
	transform: rotate(8deg);
	left: -60px;
	top: 400px;
	width: 120%;
	height: 100%;
	box-shadow: -5px -5px 15px rgba(0,0,0,0.2);
	z-index: -1;
	}
	<!-- content to be placed inside <body>…</body> -->

	<div class="content_top">content top</div>
	<div class="content_bottom">content bottom</div>
	<div id="bottom"></div>