Coins

dabblet.css

/* Coins */

@import url(http://fonts.googleapis.com/css?family=IM+Fell+English);

body {
	background: url('http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/bedge_grunge_@2X.png');
	background-size: 50%;
	cursor: default;
}
.price {
	background: rgba(0,0,0,0.05);
	border-radius: 2em;
	box-shadow: inset 0 0 0.5em rgba(0,0,0,0.35);
	padding: 0.5em 1em;
	display: inline-block;
}
.coin {
	color: #fff;
	font: 1.25em 'IM Fell English';
	text-shadow: 0 1px 4px rgba(0,0,0,0.55);
	display: inline-block;
}
.coin:after {
	content: ' ';
	background: #f0f;
	border-radius: 50%;
	transform: rotate(-30deg);
	display: inline-block;
	margin: 0 0.25em 0 0.125em;
	height: 0.5em;
	width: 0.75em;
}
.coin.copper:after {
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3a0c00), color-stop(100%,#91612d));
	box-shadow:
		inset 0 -1px 1px #ffcd52,
		0 1px 0 #6b4d3d,
		0 2px 0 #5d2e1f,
		0 3px 0 #431c11,
		0 4px 3px rgba(0,0,0,0.55);
}
.coin.silver:after {
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2a3236), color-stop(100%,#acb0b2));
	box-shadow:
		inset 0 -1px 1px #faf8f9,
		
		0 1px 0 #486566,
		0 2px 0 #27424b,
		0 3px 0 #022a2e,
		0 4px 3px rgba(0,0,0,0.55);
}
.coin.gold:after {
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#bd9423), color-stop(100%,#d8cc80));
	box-shadow:
		inset 0 -1px 1px #e3e4c2,
		0 1px 0 #906519,
		0 2px 0 #7d5816,
		0 3px 0 #634208,
		0 4px 3px rgba(0,0,0,0.55);
}

dabblet.html

<span class="price">
	<span class="gold coin">72</span>
	<span class="silver coin">28</span>
	<span class="copper coin">48</span>
</span>

settings.json

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