global

dabblet.css

/* global */
.myClockJS {
margin: 2em;
}
.myClockJS b {
display: block;
width: 100%;
font-weight: normal;
}
.myClockJS .inner {
margin: 0 auto;
position: relative;
}
/* dial clock */
.myClockJS .dial.inner {
width: 151px;
height: 151px;
}
.myClockJS .dial .shadow {
position: absolute;
width: 100%;
height: 100%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
}
.myClockJS .dial .shadow-out {
margin: -9% 0 0 -9%;
padding: 9%;
-webkit-box-shadow: 0px 10px 30px #747788;
-moz-box-shadow: 0px 10px 30px #747788;
-ms-box-shadow: 0px 10px 30px #747788;
-o-box-shadow: 0px 10px 30px #747788;
box-shadow: 0px 10px 30px #747788;
background: #fff;
background: -webkit-linear-gradient(-90deg, #fff, #eaebed);
background: -moz-linear-gradient(-90deg, #fff, #eaebed);
background: -ms-linear-gradient(-90deg, #fff, #eaebed);
background: -o-linear-gradient(-90deg, #fff, #eaebed);
background: linear-gradient(-90deg, #fff, #eaebed);
}
.myClockJS .dial .shadow-in {
margin: -4% 0 0 -4%;
padding: 4%;
-webkit-box-shadow: 0px 3px 10px #747788 inset;
-moz-box-shadow: 0px 3px 10px #747788 inset;
-ms-box-shadow: 0px 3px 10px #747788 inset;
-o-box-shadow: 0px 3px 10px #747788 inset;
box-shadow: 0px 3px 10px #747788 inset;
background: #fff;
background: -webkit-linear-gradient(-90deg, #fff, #dce1e7);
background: -moz-linear-gradient(-90deg, #fff, #dce1e7);
background: -ms-linear-gradient(-90deg, #fff, #dce1e7);
background: -o-linear-gradient(-90deg, #fff, #dce1e7);
background: linear-gradient(-90deg, #fff, #dce1e7);
}
/* segments */
.myClockJS .dial .seg b {
position: absolute;
width: 1%;
height: 100%;
min-width: 1px;
left: 50%;
margin-left: -0.4%;
}
.myClockJS .dial .seg b b:after
, .myClockJS .dial .seg b b:before {
content: '';
position: absolute;
width: 100%;
height: 3%;
background-color: #aaa;
}
/* hours */
.myClockJS .dial .seg>b>b:before
, .myClockJS .dial .seg>b>b:after {
height: 6%;
width: 250%;
}
.myClockJS .dial .seg b:before {
bottom: 0;
}
/* setup all 60 segments */
.myClockJS .dial .seg>b:last-child{
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
.myClockJS .dial .seg>b>b:nth-child(2){
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
transform: rotate(30deg);
}
.myClockJS .dial .seg>b>b:last-child{
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
-ms-transform: rotate(60deg);
-o-transform: rotate(60deg);
transform: rotate(60deg);
}
.myClockJS .dial .seg>b>b b{
-webkit-transform: rotate(6deg);
-moz-transform: rotate(6deg);
-ms-transform: rotate(6deg);
-o-transform: rotate(6deg);
transform: rotate(6deg);
}
.myClockJS .dial .seg>b>b>b:last-child{
-webkit-transform: rotate(18deg);
-moz-transform: rotate(18deg);
-ms-transform: rotate(18deg);
-o-transform: rotate(18deg);
transform: rotate(18deg);
}
/* arrows with clones, for shadow */
.myClockJS .dial .arr b {
position: absolute;
height: 100%;
left: 50%;
min-width: 1px;
}
.myClockJS .dial .arr b:after {
position: absolute;
width: 100%;
content: '';
}
.myClockJS .dial .arr b:nth-child(1)
, .myClockJS .dial .arr b:nth-child(2) {
width: 4.5%;
margin-left: -2.2%;
}
.myClockJS .dial .arr b:nth-child(1):after
, .myClockJS .dial .arr b:nth-child(2):after {
height: 25%;
top: 25%;
background-color: #000;
}
.myClockJS .dial .arr b:nth-child(3)
, .myClockJS .dial .arr b:nth-child(4) {
width: 3%;
margin-left: -1.4%;
}
.myClockJS .dial .arr b:nth-child(3):after
, .myClockJS .dial .arr b:nth-child(4):after {
height: 37%;
top: 13%;
background-color: #000;
}
.myClockJS .dial .arr b:nth-child(5)
, .myClockJS .dial .arr b:nth-child(7) {
width: 1%;
min-width: 1px;
margin-left: -0.3%;
}
.myClockJS .dial .arr b:nth-child(5):after
, .myClockJS .dial .arr b:nth-child(7):after {
height: 67%;
background-color: #d70000;
}
.myClockJS .dial .arr b:nth-child(6)
, .myClockJS .dial .arr b:nth-child(8) {
width: 8%;
margin-left: -3.9%;
}
.myClockJS .dial .arr b:nth-child(6):after
, .myClockJS .dial .arr b:nth-child(8):after {
height: 8%;
top: 46%;
background-color: #d70000;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
}
.myClockJS .dial .arr b:nth-child(1):after
, .myClockJS .dial .arr b:nth-child(3):after
, .myClockJS .dial .arr b:nth-child(5):after
, .myClockJS .dial .arr b:nth-child(6):after {
background-color: #000;
-webkit-box-shadow: 0 0 5px #000;
-moz-box-shadow: 0 0 5px #000;
-ms-box-shadow: 0 0 5px #000;
-o-box-shadow: 0 0 5px #000;
box-shadow: 0 0 5px #000;
opacity: 0.2;
}
.myClockJS .dial .arr b:nth-child(1)
, .myClockJS .dial .arr b:nth-child(3) {
margin-top: 1.5%;
}
.myClockJS .dial .arr b:nth-child(6)
, .myClockJS .dial .arr b:nth-child(5) {
margin-top: 2%;
}
.myClockJS .dial .arr b {
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
-o-animation-iteration-count: infinite;
-o-animation-timing-function: linear;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.myClockJS .dial .arr b:nth-child(1)
, .myClockJS .dial .arr b:nth-child(2) {
-webkit-animation-duration: 43200s;
-moz-animation-duration: 43200s;
-ms-animation-duration: 43200s;
-o-animation-duration: 43200s;
animation-duration: 43200s;
}
.myClockJS .dial .arr b:nth-child(3)
, .myClockJS .dial .arr b:nth-child(4) {
-webkit-animation-duration: 3600s;
-moz-animation-duration: 3600s;
-ms-animation-duration: 3600s;
-o-animation-duration: 3600s;
animation-duration: 3600s;
}
.myClockJS .dial .arr b:nth-child(5)
, .myClockJS .dial .arr b:nth-child(7) {
-webkit-animation-duration: 60s;
-moz-animation-duration: 60s;
-ms-animation-duration: 60s;
-o-animation-duration: 60s;
animation-duration: 60s;
}
	
	
.css-link {
  position: relative;
  top: 1em;
  text-align: center;
}

.denisx-link {
  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 | [email protected] | http://www.denisx.ru/ | http://twitter.com/denisx/
 Date: 2012-02-02
 Prooflink: http://www.artlebedev.ru/tools/technogrette/html/css3-clock/
 Prooflink: http://denisx.ru/myclockcss/
 Name: Pure CSS3 Dial Clock without Images & Javascript
-->

<!--
 Get UTC time form server
 ?h=4 for Moscow UTC+4 time
-->
<link href="http://denisx.ru/myclockcss/keyframes_dial.php?h=4" rel="stylesheet" type="text/css" />
<div class="myClockJS">
    <div class="inner dial">
        <b class="shadow shadow-out"></b>
        <b class="shadow shadow-in"></b>
        <div class="seg">
            <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>
        <b class="arr">
            <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/5070300">Pure CSS3 Digit Clock</a>→</p>
<p>&nbsp;</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"}