Tick Tock – A CSS & JS Experiment

Tick Tock – A CSS & JS Experiment

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.


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

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;


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~



You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>