Clock [CSS]

dabblet.css

/**
 * Clock [CSS]
 */
 
html {
	background:#fff;
	min-height: 100%;
	height:100%;
	overflow:hidden;
}

.clock {
	left:30px;
	top:25px;
	display: block;
	border-radius: 50%;
	padding:0;
	position:absolute;
	height:16px;
	width:16px;
	
	background-image:
	
	linear-gradient(#6a7373, #2f3f3f);
	
	border:1px solid #909090;
	box-shadow:
	inset 0 1px 0 0 #777d7d,
	0 1px 0 0 rgba(0,0,0,0.5);
	border-radius:50%;
	animation: spin 0s linear infinite;
 }
 
 .clock:before {
 	content:"";
 	display:block;
	background:transparent;
	width:3px;
	height:3px;
	box-shadow:
	-3px 1px 0 -1px rgba(255,255,255,0.2),
	-2px 1px 0 -1px rgba(255,255,255,0.4)
	
	;


	position:absolute;
	left:50%;
	margin-left:-1px;
	z-index:1;
 }

@keyframes spin {
  100% { transform: rotate(360deg); }
}

@keyframes spin-reverse {
  100% { transform: rotate(-360deg); }
}

.wrapper {
	width:400px;
	height:300px;
	
	left:50%;
	top:50%;
	margin:-150px -200px;
	position:absolute;
	display:block;
}

dabblet.html

<div class="wrapper">
<i class="clock"></i>
<img src="http://f.cl.ly/items/3K2f0b3A2F0F2P2s1G1y/Screen-Shot-2012-11-03-at-5.48.03-PM.png">
</div>

settings.json

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