Hi, you're looking at the archives. Go to the homepage to see the current version of lensco.be.

CSS World Clocks20

Back when the WebKit team implemented CSS animations in their engine, I started tinkering on a CSS powered clock. It was nothing spectacular, just a nice gimmick. But when I saw some of the recent efforts to push the limits of CSS, I wanted to do a little more with my bare bones clock. So what better way to spend the Easter Sunday afternoon making world clocks with nothing but HTML and CSS (and a dash of PHP)?

Look ma, no images!

That’s right, no images. Just a bunch of divs and li’s with gradients, box-shadow and border-radius. I used a few lines of PHP to get the current time and to calculate all the keyframes, but other than that, only HTML and CSS. Works smooth in any recent version of Safari or Chrome.

Click to see them in action!

20 comments comment feed

Latest …