Dabblet: CSS3 badges

dabblet.css

/**
 * Dabblet: CSS3 badges
 */

.badge {
	box-sizing: border-box;
	display: inline-block;
	text-align: center;
	text-decoration: none;
	padding-top: 1.75em;
	width: 7em;
	height: 7em;
	background: #aaa;
	background: radial-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,.25) 50%), linear-gradient(#aaa 0%, #666 100%);
	color: #eee;
	text-shadow: 1px 1px 1px rgba(0,0,0,.5), 1px 1px 10px rgba(0,0,0,.75);
	box-shadow: 2px 2px 5px rgba(0,0,0,.2), inset -2px -2px 2px rgba(0,0,0,.2); 
	border-radius: 50%;
	transform: rotate(-20deg);
}

.badge.second {
  	position: relative;
  	top: 40px;
  	left: -40px;
  	transform: rotate(10deg);
}

body {
  	font: .9em/1.1em 'Lucida Grande', 'Lucida Sans Unicode', Arial, Verdana, sans-serif;
}

dabblet.html

<a href="#" class="badge">HTML5<br>CSS3<br>28/5</a>

<a href="#" class="badge second">Mobilní<br>webdesign<br>13/6</a>

settings.json

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