CSS Box model demo

dabblet.css

/**
 * CSS Box model demo
 */

#box {
	width: 300px;
	height: 200px;
	padding: 30px;
	border-width: 10px;
	/*box-sizing: border-box;*/
}

/* No editing below this point */

#box {
	width: 300px;
	height: 200px;
	padding: 30px;
	border-style: solid;
	border-color: orange;
	margin: 20px auto;
	background-image: linear-gradient(yellowgreen, yellowgreen), linear-gradient(yellow, yellow);
	background-clip: content-box, padding-box, border-box;	
	font: 100%/1.4 sans-serif;
	text-shadow: 0 1px 1px white;
}

body:after {
	content: "";
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	pointer-events: none;
	background: linear-gradient(0deg, rgba(0,0,0,.05) 1px, transparent 1px),
	            linear-gradient(0deg, rgba(0,0,0,.1) 1px, transparent 1px),
	            linear-gradient(90deg, rgba(0,0,0,.05) 1px, transparent 1px),
	            linear-gradient(90deg, rgba(0,0,0,.1) 1px, transparent 1px);
	background-size: 10px 10px, 50px 50px, 10px 10px, 50px 50px;
}

aside {
	position: absolute;
	bottom:1em;
	right: 1em;
	z-index: 1;
	line-height: 1.5;
}

dfn {
	display: block;
	font-weight: bold;
	font-style: normal;
}


dfn:before {
	content:"";
	display: inline-block;
	width: 1em;
	height: 1em;
	vertical-align: -.2em;
	margin-right: .4em;
	border-radius: 50%;
	
}

dfn[title="orange"]:before { background: orange }
dfn[title="yellowgreen"]:before { background: yellowgreen }
dfn[title="yellow"]:before { background: yellow }


dfn[title="orange"] { color: orange }
dfn[title="yellowgreen"] { color: yellowgreen }
dfn[title="yellow"] { color: yellow }

#full-image,
#strip-image,
#gradient {
	height: 70px;
	border: 1px solid blue;
	background-color: grey;	
}

#full-image {
	background: left bottom url(http://cyberscore.me.uk/skins4/default/images/bg-gold.gif);
}

#strip-image {
	background: left bottom url(http://f.cl.ly/items/3h2t3J05103Z3h2A2X40/bg-gold-strip.jpeg) repeat-x;
} 


#gradient {
	background-image: linear-gradient(bottom, #F1DA35, #fff);
}

dabblet.html

<p id="full-image">
	With full image
<p>
<p id="strip-image">
	With strip image
<p>

<p id="gradient">
	With CSS
</p>

settings.json

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