Creating a live CSS clock using CSS3 and requestAnimationFrame()
Created: May 15th, 14'
In this tutorial we'll summon the inner clocksmith in us to build a
clock interface using pure CSS, then bring it to life with JavaScript's
requestAnimationFrame()
method. And if like most of us you discover no such
propensity for watch making at the end of your search, fret not, as what may
initially seem like a daunting task boils down to just the churning out of a
series of simple lines and round objects and dropping them into the right
place. The final result looks like this:
Demo (works in IE9+, all modern versions of Chrome and Firefox):
Time is ticking, so lets get started, first, on the clock interface.
The outer clock face and main 12-6, 9-3 hour markers
We'll begin with the outer clock configuration, which is just a single DIV with two pseudo elements to render the 12-6 and 9.3 time markers:
CSS Code:
.outer_face { HTML Markup: <div class="outer_face"> |
Result:
|
".outer_face
" is the main face of the clock, which is simply a DIV with a
border-radius value equal to its width/height, creating a round element. A
thick border is used to create a frame.
Since every element in HTML is capable of showing two "pseudo" elements
(as of CSS2-3), we'll use our .outer_face
DIV to render the primary 12-6
and 9-3 hour markings on the clock face, via .outer_face::before{}
and
.outer_face::after{}
.
As you can see, both elements are 10px thin strips centered within the face
through a combination of absolute positioning and a negative left
margin.
The second element is rotated 90 degrees from its center to form the 9-3
marker.
Adding the other hour markers
To add in the remaining hour markers on the clock face, we'll define four
DIVs inside the clock face, each carrying the CSS class "marker
". This class
will share the same basic style as the primary 12-6 and 9-3 hour markings,
but with a gray background and rotated varying degrees depending on the
hours they indicate:
CSS Code:
.outer_face::before, .outer_face::after, .outer_face
.marker{ /* All hour markers */ HTML Markup: <div class="outer_face"> |
Result:
|
At this point we have something resembling a wheel with its spokes exposed, which would bring this article to a satisfactory conclusion if we were building carriage wheels. But lets read on.
The inner clock face
Now we begin work on the inner clock face. It will be a smaller
circular element with class .inner_face
and centered inside the outer face, with a black "dot" in the
middle where the hands will later emanate from:
CSS Code:
.inner_face { HTML Markup: <div class="outer_face"> |
Result:
|
The dimensions of the inner clock face as you can see is 88% of the outer's; to center it within the later, we set its left and top position to 6% each, or (100%-88%)/2.
Once again pseudo elements are used to augment reality with two additional objects- a big black "dot" inside the inner clock face, plus a "QUARZ" text.
The clock hands
Last but certainly not least, we arrive at the clock hands, where we will reserve our best workmanship for! They will be made up of three DIVs of varying heights and width (thickness), each hand positioned so its bottom is anchored at the center of the clock:
CSS Code:
.hand, .hand.hour { HTML Markup: <div class="outer_face"> |
Result:
|
Lets break down some of the ancient watch making techniques employed here with the hands:
- We set the default height of the hands- and also specifically the
hour hand - to be 30% of the parent container's height. To position the
hand dead center inside the clock face, we set its top position to be
20% (30% + 20% = 50%), and its left to 50%. To account for the 4px width
of the hand creating a slight misalignment horizontally, we set its
margin-left
to -2px so it's perfectly centered again. We apply the same principles to the minute and second hands. - We set the transform-origin property to "bottom" (shorthand value for "center bottom"). This is so that when we rotate the hands, the pivot point is at the bottom of each hand where it meets the center point of the clock. Now that's some precision work!
Note: I've rotated the minute and second hands in the demo you see
above (by modifying their transform: rotate(0deg)
property) so each hand is visible (instead of overlapping one another). This is
not reflected in the code to the left.
We've managed to put together an entire clock interface using pure CSS, which deserves a good pat on the back. However, inevitably, we are confronted with both the urge and requests on how to make it into a actual functional clock. And that's what we'll look at next, with help from a bit of JavaScript.
- Creating a live CSS clock using CSS3 and requestAnimationFrame()
- Bringing our CSS clock to life using JavaScript's requestAnimationFrame() method
Bringing our CSS clock to life using JavaScript's requestAnimationFrame() method