Mozilla Dev Derby July

Posted on July 29, 2012 in CSS • 2 min read

I've spent some time this weekend working on an entry for Mozilla's Dev Derby. You can find my entry hosted on the competition site. This is my first entry so please, go ahead and vote for it.

I also noted today before I submitted my entry that I'm not the only one who thought to make a clock. It's interesting to see our our visuals, animations, and implementations differ.

How I Did It

I've this entry available as a GitHub repo so you can browse the source yourself.

I wanted this to be a relatively quick weekend project and fun to do. A requirement of the competition is for it to work across various browsers, so I started with Sass and Compass to deal with generating a lot of the yuck that comes with browser specific code (particularly vendor-prefixed CSS). Sass was also very useful in generating the animations. Just compare the Sass source (55 lines) and the generated CSS (1914 lines) to get an idea of how painful and impossible this would have been to do in a weekend.

CSS3 Roman Numerals

Getting the hands of the clock was relatively straightforward. The difficult part was in positioning the Roman numerals. In order for those numerals to fit correctly in the ring around the edge, they had to be rotated individually around the center of the clock face. Additionally the overall set of numerals for a given hour had to be approximately centered on the radius line for that hour. The combination of those two pretty much ruled out positioning individual characters as a sane strategy.

Instead, I opted for grouping the numerals (wrapping in <span> tags) in a parent <div> and rotating that <div> around the center. I then individually tweaked the characters by rotating them around the same point in smaller increments. I also created guides to help me align the numerals on the radius lines. You can see it commented out on line 39 here.

All in all it took me about 8-10 hours over the weekend to create this. Most of that time was spent playing with css tranforms.

I'll definitely putting in an entry for August as that contest is near and dear to my heart. </shameless-plug>