Jenn cooks breakfast!

dabblet.css

/**
 * Jenn cooks breakfast!
 * A collection of breakfast foods illustrated using CSS. 
 * Coded for fun while taking Dabblet.com for a test-run. 
 * Last updated: December 19, 2011
 * Dabblet: http://dabblet.com/gist/1497955
 * Gist: https://gist.github.com/1497955
 */

html { background: #fff; }

body { margin: 50px; }

div { position: relative; transition: all 1s linear;}

#eggs, #orange, #toast, #stack { float: left;  margin: 30px 50px;  }

#eggs { width: 300px; height: 200px; }
	.whites { border: 1px solid #333; width: 100%; height: 100%; border-radius: 100% / 100%; }	
	.yolk { position: absolute; top: 20%; left: 15%; width: 33%; height: 50%; border-radius: 100%; background: #f6d271;}
	
#orange { width: 200px; height: 230px;}
	.fruit { position: absolute; top: 15%; width: 100%; height: 85%; background: #f29122; border-radius: 100%; }
	.stem { position: absolute; top: 0; left: 50%; width: 5%; height: 16%; background: #247f2c; }
	.leaf { position: absolute; top: 0; left: 50%; width: 20%; height: 10%; background: #247f2c; border-radius: 50% / 50%; }
	
#toast { widtH: 270px; height: 260px;}
	.bread { position: absolute; top: 11%; left: 8%; width: 86%; height: 89%; background: #9e6542; }
	.crust { position: absolute; top: 0; width: 51%; height: 20%; background: #9e6542; border-radius: 100%; }
		.crust.right { left: 50%}
	.butter { position: absolute; top: 35%; left: 20%; width: 25%; height: 25%; background: #fac738; }
		.butter.right {  top: 55%; left: 55%; width: 20%; height: 20%;}

#stack { width: 310px; height: 300px; }
	.pancake { position: absolute; width: 96%; height: 30%; background: #f0c99f; border-radius: 50%; }
		.pancake.bottom { bottom: 0; }
		.pancake.middle { bottom: 6%; background: #efc08f; left: 3%; width: 99%; }
		.pancake.top { bottom: 12%; left: 1%; width: 97%; }
	.butter.top { width: 13%; height: 13%; top: 62%; left: 30%; background: #fce969; }
	.butter.bottom { width: 16%; height: 16%; top: 66%; left: 50%; background: #fce969; }
	
	#syrup { width: 55%; height: 75%; }
		.handle { position: absolute; left: 29%; top: 0; background: #9e6542; width: 29%; height: 22%; border-radius: 50%;  }
		.hole { position: absolute; left: 35%; top: 4%; background: #fff; width: 18%; height: 14%; border-radius: 50%; }
		.bottle { position: absolute; top: 11%; width: 90%; height: 45%; background: #9e6542; border-radius: 0 40% 40% 0;}
		.spout { position: absolute; left: 88%; top: 27%; width: 11%; height: 14%; background: #9e6542;}
		.drip { position: absolute; left: 97%; top: 33%; width: 5%; height: 40%; background: #bf8765; border-radius: 100% / 100%; }
	#syrup:hover { left: 30%;}
	#syrup:hover .drip { height: 70%; width: 6%; }

dabblet.html

<!-- EGGIES -->
<div id="eggs">
	<div class="whites"> </div>
	<div class="yolk"> </div>
</div>

<!-- OH RAHNGGG -->
<div id="orange">
	<div class="fruit"> </div>
	<div class="stem"> </div>
	<div class="leaf"> </div>
</div>

<!-- YOU'RE BROWN BREAD! -->
<div id="toast">
	<div class="bread"> </div>
	<div class="crust left"> </div>
	<div class="crust right"> </div>
	<div class="butter left"> </div>
	<div class="butter right"> </div>
</div>

<!-- PAHN KICK -->
<div id="stack">
	<div class="pancake bottom"> </div>
	<div class="pancake middle"> </div>
	<div class="pancake top"> </div>
	<div class="butter top"> </div>
	<div class="butter bottom"> </div>
	
	<div id="syrup">
		<div class="handle"> </div>
		<div class="hole"> </div>
		<div class="bottle"> </div>
		<div class="spout"> </div>
		<div class="drip"> </div>	
	</div>
</div>

settings.json

{"page":"css","view":"split"}