Learning CSS3

dabblet.css

/**
 * Learning CSS3
 * RGBA/HSLA, border-radius, box-shadow, text-shadow
 */

html { 
	min-height:100%;
	background: url('http://leaverou.github.com/CSSS/img/rainbow-wood.jpg') center;
}

section {
	max-width: 20em;
	padding: 3em;
	margin: 4em auto;
	border: 1px solid rgba(0,0,0,.5);
	border-radius: 20px;
	background-color: rgba(0,0,0,.5);
	color: white; 
	font: 100%/1.5 sans-serif;
	text-shadow: 0 -.1em .2em black;
	box-shadow: 0 2px 6px rgba(0,0,0,0.5),
	            0 1px hsla(0,0%,100%,.3) inset,
	            0 1em hsla(0,0%,100%,.15) inset,
	            0 1em 20px hsla(0,0%,100%,.2) inset,
	            0 -15px 30px rgba(0,0,0,0.3) inset;

}

h1 {
	margin: 0;
	font-size: 250%;
	text-shadow: 0 0 1em hsla(0,0%,100%,.6);

}

dabblet.html

<section>
	<h1>Learning CSS3</h1>
	<p>This is just some example content. Don’t even bother reading it, you will just waste your time.
	Why do you keep reading? Do I have to use Lorem Ipsum to stop you from that? 
	Ok, here goes: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
	Still reading? Oh gosh, you’re impossible. I’ll stop here to save you from yourself.
</section>

settings.json

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