HomeDHTML & CSS
Creating a live CSS clock using CSS3 and requestAnimationFrame()

Categories:AllFree JS/ AppletsTutorialsReferences

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:

".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:

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:

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:

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.