Learning CSS3

dabblet.css

/**
 * Learning CSS3
 * Animations
 */

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

@keyframes fall {
	from { margin-top: -30em; }
}

section {
	max-width: 20em;
	padding: 3em;
	margin: 4em auto;
	border: 20px solid rgba(0,0,0,.5);
	background-color: black;
	background-clip: padding-box;
	color: white; 
	font: 100%/1.5 sans-serif;
	text-shadow: 0 -.1em .2em black;
	animation: fall .5s 1s cubic-bezier(.2,.5,.5,1.5) backwards;
}

h1 { margin-top: 0 }

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","seethrough":"","prefixfree":"1","page":"css"}

I wish these had a link to a dabblet page to test them out from github's timeline.

drublic's dabblet Chrome app adds a link inside gists. It would probably be super easy to add it to listings too.

A markdown file or something with a link in the gist would be fine also. I just want to check the dabblet out but I'd prefer if I didn't have to install an app for that.

Eventually it will be posted as a comment, but I don't see that implemented very soon.