Tutorials

Tick Tock – A CSS & JS Experiment

Recently while trying to come up with clever ways to show the calendar date, I came up with an idea of creating a clock with CSS.  At first I figured this is probably not as usable as I hoped (and possibly pointless until some of its major flaws are fixed), but I decided to take a stab at it just for my own amusement. 

This clock was created using a combination of CSS and Javascript. The Javascript gets the user’s local time (you could use PHP, but that would be server time) and updates the CSS <div> tags with the appropriate hour and minute classes.

The Breakdown

Basically this clock is broken down into 3 layers. Using transparent PNG files, I created the hour/min/sec arms and layered them on top of each other using absolute positioning. The original Clock image was created by Cemagraphics, they did a beautiful job creating this icon.

HTML

<div id="clockbase">
	    <div id="hours"></div>
	    <div id="minutes"></div>
	    <div id="seconds"></div>
</div>

CSS
Using the CSS Sprites technique, I layed out each of the arms in one image and shifted them according to the time frame using the background positioning.

body {
	margin: 0;
	padding: 0;
	background: #3e5e84 url(bg_stretch.gif) repeat-x;
}
* {
	margin: 0;
	padding: 0;
}
#clockbase {
	width: 512px;
	height: 512px;
	position: relative;
	margin: 0 auto;
	background: url(clock_bg.jpg) no-repeat;
}
#minutes {
	width: 229px;
	height: 229px;
	position: absolute;
	top: 200px;
	left: 137px;
	background: url(minutes-arm.png) no-repeat;
}
#hours {
	width: 200px;
	height: 200px;
	position: absolute;
	top: 220px;
	left: 150px;
	background: url(hours-arm.png) no-repeat left bottom;
}
#seconds {
	width: 260px;
	height: 260px;
	position: absolute;
	top: 184px;
	left: 120px;
	background: url(SECS.gif) no-repeat;

}
#clockbase .min05 {background-position: left top;}
#clockbase .min10 {background-position: left -229px;}
#clockbase .min15 {background-position: left -458px;}
#clockbase .min20 {background-position: left -687px;}
#clockbase .min25 {background-position: left -916px;}
#clockbase .min30 {background-position: left -1145px;}
#clockbase .min35 {background-position: left -1374px;}
#clockbase .min40 {background-position: left -1603px;}
#clockbase .min45 {background-position: left -1832px;}
#clockbase .min50 {background-position: left -2061px;}
#clockbase .min55 {background-position: left -2290px;}
#clockbase .min00 {background-position: left -2519px;}

#clockbase .hr1 {background-position: left top;}
#clockbase .hr2 {background-position: left -200px;}
#clockbase .hr3 {background-position: left -400px;}
#clockbase .hr4 {background-position: left -600px;}
#clockbase .hr5 {background-position: left -800px;}
#clockbase .hr6 {background-position: left -1000px;}
#clockbase .hr7 {background-position: left -1200px;}
#clockbase .hr8 {background-position: left -1400px;}
#clockbase .hr9 {background-position: left -1600px;}
#clockbase .hr10 {background-position: left -1800px;}
#clockbase .hr11 {background-position: left -2000px;}
#clockbase .hr12 {background-position: left -2200px;}

/*--Replaced the PNG with a GIF for IE6--*/
*html #minutes {
	background: url(minutes-arm.gif) no-repeat;
}
*html #hours {
	background: url(hours-arm.gif) no-repeat left bottom;
}

Conclusion

As you may have noticed, the clock moves in increments of five minutes. I was hesitant to make 60 segments of the arm since this was just an experiment. If you have any questions, comments, or input, I would love to hear your thoughts on this~

*Update – Alternative Using CSS3

Toby Pitman just notified me that he had also created a CSS Clock just recently, with a completely different approach. Do check out his version as well! He utilizes the “rotate” feature in CSS3 (Supported in Safari) and uses jQuery to get the local time. Check out his post on CSS-Trick’s Forum, and his demo can be found here.