there is no spoon

dabblet.css

/**
 * there is no spoon 
 */

coffee{
	display:table;
	position:relative;
	width: 100px;
	height: 100px;
	margin:100px auto;
	background-color:rgba(80,50,0,0.8);
	border-radius:50%;
	border:10px solid rgba(220,220,220,1);
	color:white;
	box-shadow:0 0 20px black, inset 0 0 25px black;
}
coffee:before,
coffee:after{ 
	content:" ";	display: block;
	width:35px;
	height: 20px;
	background-color: rgba(220,220,220,1);
	position: absolute;	
	top:50%;
	margin-top: -10px;
	border-radius: 0 10px 10px 0;
}
coffee:before{
	right: -35px;
	z-index:20;
}
coffee:after{
	margin-top: -10px;
	margin-left: 10px;
	box-shadow: 7px 0 15px -2px rgba(0,0,0,0.7);
	z-index:10;
}
sugar{
	display:table-cell;
	text-align:center;
	vertical-align: middle;
}
heart{
	display:inline;
	color:red;
	text-shadow:0 0 3px black;
}
/*
 * created by ultim8k
 * idea from: http://www.impressivewebs.com/default-css-display-values-html-elements/ 
 */

dabblet.html

<!--As you can see, you can create your own elements, but stay away from my coffee ;)-->
<coffee>
	<sugar>I <heart>&hearts;</heart> css!</sugar>
</coffee>

settings.json

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