content-box shadows part II

dabblet.css

/**
 * content-box shadows part II
 */
 body {
 	background-color: #666; }
 
.container {
	width: 80%; height: 800px;
	border-radius: 20px;
	box-shadow: 0 0 20px 0 black;
	overflow: hidden;
	margin: 0 auto; }

.left, .right {
	width: 50%; height: 100%; }

.left { float: left; z-index: 2; background: #eee; }
.right { float: right; z-index: 1; background: #cceeee; }

.right {
	background-image:
		linear-gradient(left,
			rgba(128,128,128,0.5) 0,
			rgba(128,128,128,0.1) 50%, 
			rgba(128,128,128,0) 100%
		);
	background-size: 20px 1px;
	background-repeat: repeat-y; }
		
@media only all and (max-width: 600px) {
	.left, .right {
		float: none;
		width: 100%; height: 50%; }

	.right {
		background-image:
			linear-gradient(top,
				rgba(128,128,128,0.5) 0,
				rgba(128,128,128,0.1) 50%, 
				rgba(128,128,128,0) 100%
			);
		background-size: 1px 20px;
		background-repeat: repeat-x; }
}

dabblet.html

<div class="container">
	<div class="left"></div>
	<div class="right"></div>
</div>

settings.json

{"view":"split-vertical","fontsize":"80","seethrough":"","prefixfree":"1","page":"all"}