CSS3 clock with no JavaScript

HTML and CSS XSLT JavaScript Images Soft Etc

Safari 4+, Firefox 6+ or Chrome 13+ required to view this example.

	Task:	to create a clock without using images or JavaScript.

The initial hand position is set in a dynamic CSS which is generated by a server script written in PHP (1,57 KB) or Parser Parser (1,34 KB). The correct prefix for @keyframes is determined by HTTP_USER_AGENT.

The clock shows Moscow time (UTC+4). Local time can be shown based on user profile settings or by quering an IP database.

Dynamic CSS:

/* UTC+4 time 05:26:27 */
/* Browser prefix: -webkit- */

.myClockJS .dial .arr b:nth-child(1)
, .myClockJS .dial .arr b:nth-child(2)
{
    -webkit-animation-name: arr1;
}
@-webkit-keyframes arr1 {
    from { -webkit-transform: rotate(163deg)}
    to { -webkit-transform: rotate(523deg)}
}
.myClockJS .dial .arr b:nth-child(3)
, .myClockJS .dial .arr b:nth-child(4)
{
    -webkit-animation-name: arr2;
}
@-webkit-keyframes arr2 {
    from { -webkit-transform: rotate(159deg)}
    to { -webkit-transform: rotate(519deg)}
}
.myClockJS .dial .arr b:nth-child(5)
, .myClockJS .dial .arr b:nth-child(7)
{
    -webkit-animation-name: arr3;
}
@-webkit-keyframes arr3 {
    from { -webkit-transform: rotate(162deg)}
    to { -webkit-transform: rotate(522deg)}
}

Static CSS and HTML:

/* global */
.myClockJS {
    margin: 6em;
}
.myClockJS b {
    display: block;
    width: 100%;
    font-weight: normal;
}
.myClockJS .inner {
    margin: 0 auto;
    position: relative;
}
/* dial clock */
.myClockJS .dial.inner {
    width: 251px;
    height: 251px;
}
.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;
}

<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>

Order a design...

CSS3 clock with no JavaScript February 2, 2012