CSS3 Clock

From http://cssdeck.com/labs/wall-clock-in-pure-css3

by B L Praveen

HTML

<div id="clock">
	<div id="a">
		<div id="b">
			<div id="c">
				<div id="d">
					<div id="sh">
						<div class="hh">
							<div class="h"></div>
						</div>
						<div class="mm">
							<div class="m"></div>
							<div class="mr"></div>
						</div>
						<div class="ss">
							<div class="s"></div>
						</div>
					</div>
					<div id="ii">
					<b><i></i><i></i><i></i><i></i></b>
					<b><i></i><i></i><i></i><i></i></b>
					<b><i></i><i></i><i></i><i></i></b>
					<b><i></i><i></i><i></i><i></i></b>
					<b><i></i><i></i><i></i><i></i></b>
					<b><i></i><i></i><i></i><i></i></b>
					</div>
					<div id="e">
						<div id="f">
							<u>12<u>1<u>2<u>3</u>4</u>5</u></u>
						</div>
						<div id="g">
							<u><u>11<u>10<u>9</u>8</u>7</u>6</u>
						</div>
						<div id="q"><a href="" style="position:relative;z-index:1000;color:#222;text-decoration:none;">quartz</a></div>
					</div>
					<div class="hh">
						<div class="h"></div>
					</div>
					<div class="mm">
						<div class="m"></div>
						<div class="mr"></div>
					</div>
					<div class="ss">
						<div class="s"></div>
						<div class="sr"></div>
					</div>
					<div id="k"></div>
				</div>
			</div>
		</div>
	</div>
</div>

CSS

#clock {
}
#a {
	width:10.0em;
	height:10.0em;
	position:relative;
	border-radius:5.0em;
	background:#ccc;/*ccc*/
	box-shadow:
		inset 0.05em -0.05em 0 #333, /*ccc*/
		inset 0.17em -0.17em 0 #555,
		inset -0.03em -0.04em 0 #333, /*999*/
		inset -0.03em 0.02em 0 #333, /*ccc*/
		inset -0.1em -0.1em 0 #555,
		0.1em 0.3em 0.2em rgba(0,0,0,0.3);
}
#b {
	width:9.4em;
	height:9.4em;
	top:0.3em;
	left:0.3em;
	position:relative;
	border-radius:4.7em;
	background:#fff;
	box-shadow:
		inset 0.04em 0 0 #fff,
		inset 0 -0.06em 0 #ddd,
		inset 0.16em -0.08em 0 #222,
		inset -0.16em 0.08em 0 #222,
		inset 0.2em 0.2em 0 #222,
		0.06em -0.03em 0 #999, 
		-0.1em 0.1em 0 #777,
		-0.13em -0.2em 0 #fff,
		0.13em 0.2em 0 #222,
		0.13em 0.3em 0 #333; /*ccc*/
}
#c {
	width:8.9em;
	height:8.9em;
	top:0.25em;
	left:0.25em; 
	position:relative;
	border-radius:4.45em;
	background:#eed;/*f4f5f6;*/
	box-shadow:
		inset 0.15em 0.2em 0.05em rgba(0,0,0,0.4),
		inset 0.2em 0.4em 0.2em rgba(0,0,0,0.3),
		inset 0 0.05em 0.3em rgba(0,0,0,0.1),
		-0.16em 0.08em 0 #444,
		0.16em -0.08em 0 #444;
}
#d { width:8.8em;
	 height:8.8em;
	 top:0.05em;
	 left:0.05em;
	 position:relative;
	 border-radius:4.4em;
}
#e { width:8.18em;
	 height:8.18em;
	 padding-top:4.09em;
	 box-sizing: border-box;
	 -moz-box-sizing: border-box;
	 -webkit-box-sizing: border-box;
	 left:0.29em;
	 top:0.29em;
	 position:absolute;
	 border:solid 0.04em rgba(0,0,0,0.5);
	 border-radius:4.09em;  
}
#ii {
	padding-left:4.34em;
	position:absolute;
}
b, i {
	height:8.2em; 
	position:absolute;
	display:block;
}
b {
	border:solid 0 #222;
	border-width:0.3em 0;
	width:0.12em;
}
i {
	border:solid 0 rgba(0,0,0,0.5);
	border-width:0.3em 0;
	width:0.04em;
}
b>i,i>i {
	transform:rotate(6deg) ;
	margin-top:-0.3em;
}
b>b  {
	transform:rotate(30deg);
	margin-top:-0.3em; }
b>i {
	left:0.03em;
}
#f,#g {
	font:1.2em/1.0em WallClock, sans-serif;
	text-align:center;
	width:6.8em;
    color:#222;
}
#g>u>u {	
	letter-spacing:0.1em;
}
#g>u>u>u...