/

dabblet.css

/* *************************************** */
/* font by http://www.dafont.com/digital-7.font */

@font-face {
    font-family: 'digital-7';
    src: url('http://denisx.ru/fonts/digital-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

.myClockJS .digit {
	margin: 0 auto;
	position: relative;
	width: 100px;
	font: 48px/1 'digital-7';
  left: -60px;
}

.myClockJS b {
  font-weight: normal;
}


.myClockJS .digit .arr>b>b:nth-child(1)>b:after{content:'0';}
.myClockJS .digit .arr>b>b:nth-child(2)>b:after{content:'1';}
.myClockJS .digit .arr>b>b:nth-child(3)>b:after{content:'2';}
.myClockJS .digit .arr>b>b:nth-child(4)>b:after{content:'3';}
.myClockJS .digit .arr>b>b:nth-child(5)>b:after{content:'4';}
.myClockJS .digit .arr>b>b:nth-child(6)>b:after{content:'5';}
.myClockJS .digit .arr>b>b:nth-child(7)>b:after{content:'6';}
.myClockJS .digit .arr>b>b:nth-child(8)>b:after{content:'7';}
.myClockJS .digit .arr>b>b:nth-child(9)>b:after{content:'8';}
.myClockJS .digit .arr>b>b:nth-child(10)>b:after{content:'9';}

.myClockJS .digit .arr>b:nth-child(3)>b:nth-child(1)>b:after
, .myClockJS .digit .arr>b:nth-child(6)>b:nth-child(1)>b:after
{
	content:':';
}

.myClockJS .digit .arr>b
, .myClockJS .digit .arr>b>b
{
	position: absolute;
	width: auto;
}


.myClockJS .digit .arr>b:nth-child(1) {
	left: 0;
}
.myClockJS .digit .arr>b:nth-child(2) {
	left: 30px;
}
.myClockJS .digit .arr>b:nth-child(3) {
	left: 50px;
}
.myClockJS .digit .arr>b:nth-child(4) {
	left: 70px;
}
.myClockJS .digit .arr>b:nth-child(5) {
	left: 100px;
}
.myClockJS .digit .arr>b:nth-child(6) {
	left: 120px;
}
.myClockJS .digit .arr>b:nth-child(7) {
	left: 140px;
}
.myClockJS .digit .arr>b:nth-child(8) {
	left: 170px;
}
.myClockJS .digit .arr:after {
	content: '';
	display: block;
	clear: both;
}

.myClockJS .digit .arr>b>b {
	opacity: 0;
}

/* webkit */
.myClockJS .digit .arr>b>b {
	-webkit-animation-iteration-count: infinite;
}

.myClockJS .digit .arr>b:nth-child(1)>b{-webkit-animation-duration: 86400s;} /* 86400 */
.myClockJS .digit .arr>b:nth-child(2)>b{-webkit-animation-duration: 86400s;} /* 86400 */
.myClockJS .digit .arr>b:nth-child(4)>b{-webkit-animation-duration: 3600s;}  /* 3600 */
.myClockJS .digit .arr>b:nth-child(5)>b{-webkit-animation-duration: 600s;}   /* 600 */
.myClockJS .digit .arr>b:nth-child(7)>b{-webkit-animation-duration: 60s;}    /* 60 */
.myClockJS .digit .arr>b:nth-child(8)>b{-webkit-animation-duration: 10s;}    /* 10 */

.myClockJS .digit .arr>b:nth-child(3)>b
, .myClockJS .digit .arr>b:nth-child(6)>b
{
	-webkit-animation-duration: 1s;
	-webkit-animation-name: digit_second;
	-webkit-animation-delay: 0.01s;
}
@-webkit-keyframes digit_second { 0% {opacity: 0 } 1% {opacity: 1 } 50% {opacity: 1 }  51% {opacity: 0 }}

/* moz */

.myClockJS .digit .arr>b>b {
	-moz-animation-iteration-count: infinite;
}

.myClockJS .digit .arr>b:nth-child(1)>b{-moz-animation-duration: 86400s;} /* 86400 */
.myClockJS .digit .arr>b:nth-child(2)>b{-moz-animation-duration: 86400s;} /* 86400 */
.myClockJS .digit .arr>b:nth-child(4)>b{-moz-animation-duration: 3600s;}  /* 3600 */
.myClockJS .digit .arr>b:nth-child(5)>b{-moz-animation-duration: 600s;}   /* 600 */
.myClockJS .digit .arr>b:nth-child(7)>b{-moz-animation-duration: 60s;}    /* 60 */
.myClockJS .digit .arr>b:nth-child(8)>b{-moz-animation-duration: 10s;}    /* 10 */

.myClockJS .digit .arr>b:nth-child(3)>b
, .myClockJS .digit .arr>b:nth-child(6)>b
{
	-moz-animation-duration: 1s;
	-moz-animation-name: digit_second;
	-moz-animation-delay: 0.01s;
}
@-moz-keyframes digit_second { 0% {opacity: 0 } 1% {opacity: 1 } 50% {opacity: 1 }  51% {opacity: 0 }}

.css-link {
  position: relative;
  top: 4em;
  text-align: center;
}

.denisx-link {
	position: relative;
  top: 5em;
  text-align: right;
	margin-right: 1em;
	color: #aaa;
	font-size: 0.8em;
}
.with-love {
	position: absolute;
	margin-top: 1.5em;
}
.jq-link {
	position: absolute;
	font-size: 0.85em;
		margin-top: 4em;
}

dabblet.html

<!--
 Author: denisx | denisx@denisx.ru | http://www.denisx.ru/ | http://twitter.com/denisx/
 Date: 2012-02-02
 Prooflink: http://denisx.ru/myclockcss/
 Name: Pure CSS3 Digit Clock without Images & Javascript
-->

<!--
 Get UTC time form server
 ?h=4 for Moscow UTC+4 time
-->
<link href="http://denisx.ru/myclockcss/keyframes_digit.php?h=4" rel="stylesheet" type="text/css" />

<div class="myClockJS">

	<div class="digit">
		<b class="arr">
			<b>
				<b><b></b></b>
				<b><b></b></b>
				<b><b></b></b>
			</b>
			<b>
				<b><b></b></b>
				<b><b></b></b>
				<b><b></b></b>
				<b><b></b></b>
				<b><b></b></b>
				<b><b></b></b>
				<b><b></b></b>
				<b><b></b></b>
				<b><b></b></b>
				<b><b></b></b>
			</b>
			<b>
				<b><b></b></b>
			</b>
			<b>
				<b><b></b></b>
				<b><b></b></b>
				<b><b></b></b>
				<b><b></b></b>
				<b><b></b></b>
				<b><b></b></b>
			</b>
			<b>
				<b><b></b></b>
				<b><b></b></b>
				<b><b></b></b>
				<b><b></b></b>
				<b><b></b></b>
				<b><b></b></b>
				<b><b></b></b>
				<b><b></b></b>
				<b><b></b></b>
				<b><b></b></b>
			</b>
			<b>
				<b><b></b></b>
			</b>
			<b>
				<b><b></b></b>
				<b><b></b></b>
				<b><b></b></b>
				<b><b></b></b>
				<b><b></b></b>
				<b><b></b></b>
			</b>
			<b>
				<b><b></b></b>
				<b><b></b></b>
				<b><b></b></b>
				<b><b></b></b>
				<b><b></b></b>
				<b><b></b></b>
				<b><b></b></b>
				<b><b></b></b>
				<b><b></b></b>
				<b><b></b></b>
			</b>
		</b>
	</div>
</div>

<p class="css-link"><a target="_blank" href="http://dabblet.com/gist/5070304">Pure CSS3 Dial Clock</a>→</p>

<p class="denisx-link"><span class="with-love">from Russia with love</span><span class="jq-link"><a target="_blank" href="http://util.factum.pro/jquery/">jQuery Docs with Version Switcher</a></span>Carefully made by <a target="_blank" href="http://www.denisx.ru/">Denis Khripkov</a></p>
<p>&nbsp;</p>

dabblet.js

// alert('Hello world!');

settings.json

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