goshacmd/dabblet.css

## dabblet.css
/**
 * CSS3 version of the Beijing Air icon
 * http://dribbble.com/shots/363832-Beijing-Air-app
 */

 @import url(http://fonts.googleapis.com/css?family=Overlock);

 body {
 	font-size: 10px;
 	background: url(http://f.cl.ly/items/3d460M1G3a0Z0R382O0e/BlurredLights.png) no-repeat center center fixed;
 	background-size: cover;
 }

 h1 {
 	text-align: center;
 	font-size: 4em;
 	font-family: Overlock;
 	color: #d1d1d1;
 	text-shadow: .05em .05em .7em #1f1f1f;
}

 .air-wrapper {
	position: absolute;
	left: 50%;
	top: 50%;
	margin: -6em 0 0 -6em;
 }

.air {
	height: 12em;
	width: 12em;
	border-radius: 2em;
	background: linear-gradient(#ececec, #d9d9d9);
	box-shadow: 0 1em 5.5em 1em #3e3e3e;
}

.air .dark-circle {
	position: relative;
	top: 2em;
	left: 2em;
	height: 8em;
	width: 8em;
	background: linear-gradient(#ccd0c5, #b3baaa);
	box-shadow: inset 0 -.2em .5em 0 #9da58f, inset 0 .2em 0 0 #9da58f;
	border-radius: 4em;
}

.air .dark-circle .wrapper {
	position: relative;
	height: 12em;
	width: 12em;
	top: -6em;
	left: -2em;
	transform: rotate(-45deg);
}

.air .dark-circle .wrapper:hover {
	animation-duration: 5s;
	animation-name: rotate-arrow;
	animation-iteration-count: infinite;
	animation-direction: alternate;
}

@keyframes rotate-arrow {
	30% { transform: rotate(110deg); }
	35% { transform: rotate(100deg); }
	40% { transform: rotate(115deg); }
	50% { transform: rotate(90deg); }
	60% { transform: rotate(120deg); }
	65% { transform: rotate(100deg); }
	70% { transform: rotate(120deg); }
	to { transform: rotate(-90deg); }
}

.air .dark-circle .wrapper .arrow {
	position: relative;
	top: 2.7em;
	left: 5em;
	width: 0;
	height: 0;
        border-left: 1em solid transparent;
        border-right: 1em solid transparent;
        border-bottom: 3.5em solid #737a68;
	z-index: 5;
}

.air .dark-circle .light-circle {
	position: relative;
	top: 2em;
	left: 2em;
	height: 4em;
	width: 4em;
	background: linear-gradient(#ececec, #d9d9d9);
	box-shadow: 0 .1em .5em 0 #6a6a6a;
	border-radius: 2em;
	z-index: 15;
}


.air .dark-circle .line {
	position: relative;
	width: 0;
	height: 0;
	border-left: .7em solid #9ca391;
	border-bottom: .1em solid #9ca391;
}

/* Yeah, that's awkward */
.air .dark-circle .line:nth-child(3) {
	top: -10.65em;
	left: .3em;
	transform: rotate(-22.5deg);
}

.air .dark-circle .line:nth-child(4) {
	top: -12.2em;
}

.air .dark-circle .line:nth-child(5) {
	top: -13.65em;
	left: .3em;
	transform: rotate(22.5deg);
}

.air .dark-circle .line:nth-child(6) {
	top: -14.9em;
	left: 1.05em;
	transform: rotate(45deg);
}

.air .dark-circle .line:nth-child(7) {
	top: -15.8em;
	left: 2.2em;
	transform: rotate(67.5deg);
}

.air .dark-circle .line:nth-child(8) {
	top: -16.2em;
	left: 3.55em;
	transform: rotate(90deg);
}

.air .dark-circle .line:nth-child(9) {
	top: -16.05em;
	left: 4.95em;
	transform: rotate(-67.5deg);
}

.air .dark-circle .line:nth-child(10) {
	top: -15.4em;
	left: 6.15em;
	transform: rotate(-45deg);
}

.air .dark-circle .line:nth-child(11) {
	top: -14.3em;
	left: 7em;
	transform: rotate(-22.5deg);
}

.air .dark-circle .line:nth-child(12) {
	top: -13.05em;
	left: 7.3em;
}

.air .dark-circle .line:nth-child(13) {
	top: -11.6em;
	left: 7em;
	transform: rotate(22.5deg);
}

## dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div class="air-wrapper">
	<a href="http://dribbble.com/shots/363832-Beijing-Air-app">
		<div class="air">
			<div class="dark-circle">
				<div class="light-circle"></div>
				<div class="wrapper"><div class="arrow"></div></div>
				<div class="line"></div>
				<div class="line"></div>
				<div class="line"></div>
				<div class="line"></div>
				<div class="line"></div>
				<div class="line"></div>
				<div class="line"></div>
				<div class="line"></div>
				<div class="line"></div>
				<div class="line"></div>
				<div class="line"></div>
			</div>
		</div>
	</a>
	<h1>Air</h1>
</div>

## settings.json
{"view":"split-vertical","prefixfree":"1","page":"css"}
	/**
	* CSS3 version of the Beijing Air icon
	* http://dribbble.com/shots/363832-Beijing-Air-app
	*/

	@import url(http://fonts.googleapis.com/css?family=Overlock);

	body {
	font-size: 10px;
	background: url(http://f.cl.ly/items/3d460M1G3a0Z0R382O0e/BlurredLights.png) no-repeat center center fixed;
	background-size: cover;
	}

	h1 {
	text-align: center;
	font-size: 4em;
	font-family: Overlock;
	color: #d1d1d1;
	text-shadow: .05em .05em .7em #1f1f1f;
	}

	.air-wrapper {
	position: absolute;
	left: 50%;
	top: 50%;
	margin: -6em 0 0 -6em;
	}

	.air {
	height: 12em;
	width: 12em;
	border-radius: 2em;
	background: linear-gradient(#ececec, #d9d9d9);
	box-shadow: 0 1em 5.5em 1em #3e3e3e;
	}

	.air .dark-circle {
	position: relative;
	top: 2em;
	left: 2em;
	height: 8em;
	width: 8em;
	background: linear-gradient(#ccd0c5, #b3baaa);
	box-shadow: inset 0 -.2em .5em 0 #9da58f, inset 0 .2em 0 0 #9da58f;
	border-radius: 4em;
	}

	.air .dark-circle .wrapper {
	position: relative;
	height: 12em;
	width: 12em;
	top: -6em;
	left: -2em;
	transform: rotate(-45deg);
	}

	.air .dark-circle .wrapper:hover {
	animation-duration: 5s;
	animation-name: rotate-arrow;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	}

	@keyframes rotate-arrow {
	30% { transform: rotate(110deg); }
	35% { transform: rotate(100deg); }
	40% { transform: rotate(115deg); }
	50% { transform: rotate(90deg); }
	60% { transform: rotate(120deg); }
	65% { transform: rotate(100deg); }
	70% { transform: rotate(120deg); }
	to { transform: rotate(-90deg); }
	}

	.air .dark-circle .wrapper .arrow {
	position: relative;
	top: 2.7em;
	left: 5em;
	width: 0;
	height: 0;
	border-left: 1em solid transparent;
	border-right: 1em solid transparent;
	border-bottom: 3.5em solid #737a68;
	z-index: 5;
	}

	.air .dark-circle .light-circle {
	position: relative;
	top: 2em;
	left: 2em;
	height: 4em;
	width: 4em;
	background: linear-gradient(#ececec, #d9d9d9);
	box-shadow: 0 .1em .5em 0 #6a6a6a;
	border-radius: 2em;
	z-index: 15;
	}


	.air .dark-circle .line {
	position: relative;
	width: 0;
	height: 0;
	border-left: .7em solid #9ca391;
	border-bottom: .1em solid #9ca391;
	}

	/* Yeah, that's awkward */
	.air .dark-circle .line:nth-child(3) {
	top: -10.65em;
	left: .3em;
	transform: rotate(-22.5deg);
	}

	.air .dark-circle .line:nth-child(4) {
	top: -12.2em;
	}

	.air .dark-circle .line:nth-child(5) {
	top: -13.65em;
	left: .3em;
	transform: rotate(22.5deg);
	}

	.air .dark-circle .line:nth-child(6) {
	top: -14.9em;
	left: 1.05em;
	transform: rotate(45deg);
	}

	.air .dark-circle .line:nth-child(7) {
	top: -15.8em;
	left: 2.2em;
	transform: rotate(67.5deg);
	}

	.air .dark-circle .line:nth-child(8) {
	top: -16.2em;
	left: 3.55em;
	transform: rotate(90deg);
	}

	.air .dark-circle .line:nth-child(9) {
	top: -16.05em;
	left: 4.95em;
	transform: rotate(-67.5deg);
	}

	.air .dark-circle .line:nth-child(10) {
	top: -15.4em;
	left: 6.15em;
	transform: rotate(-45deg);
	}

	.air .dark-circle .line:nth-child(11) {
	top: -14.3em;
	left: 7em;
	transform: rotate(-22.5deg);
	}

	.air .dark-circle .line:nth-child(12) {
	top: -13.05em;
	left: 7.3em;
	}

	.air .dark-circle .line:nth-child(13) {
	top: -11.6em;
	left: 7em;
	transform: rotate(22.5deg);
	}
	<!-- content to be placed inside <body>…</body> -->
	<div class="air-wrapper">
	<a href="http://dribbble.com/shots/363832-Beijing-Air-app">
	<div class="air">
	<div class="dark-circle">
	<div class="light-circle"></div>
	<div class="wrapper"><div class="arrow"></div></div>
	<div class="line"></div>
	<div class="line"></div>
	<div class="line"></div>
	<div class="line"></div>
	<div class="line"></div>
	<div class="line"></div>
	<div class="line"></div>
	<div class="line"></div>
	<div class="line"></div>
	<div class="line"></div>
	<div class="line"></div>
	</div>
	</div>
	</a>
	<h1>Air</h1>
	</div>