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!
[...] Easter Sunday afternoon making world clocks with nothing but HTML and CSS (and a dash of PHP)?via Lensco.be | Blog | CSS World Clocks. Impressive though totally broken on anything other than a Webkit browser (ie. Safari and [...]
Very interesting. Works fine in Chrome 5.0.342.7 beta, Opera 10.10 for mac…not so well for Firefox 3.6.3 for mac. Clocks are squished horizontally. Impressive, though, nonetheless.
@clint Correct, I did not bother to make it look good in Firefox, as it doesn’t support the CSS animations yet.
This looks great on an iPad. No images?! Only CSS and HTML?! Nicely done!
I run Opera 10 on Wins and it does the same as in Firefox … Too bad. But still, very nice
i can’t wait for CSS3 to be supported widely!
I looks bad in FF
Very nicely done! Love it when I get to learn from examples like this. Thanks for sharing.
There was some fuss a few weeks about how someone couldn’t get a bare bones analog clock app accepted in the app store. What I’d really like to see though is this clock as a web app.
Do you mind if other people reuse this code not for profit?
Does not work in Opera 10.53 which is the latest as of now.
@Carl Sure, as long as they give credit for it.
[...] angles (such as the strings) are masked using containers with overflow: hidden; set on them. CSS World ClocksBack when the WebKit team implemented CSS animations in their engine, I started tinkering on a CSS [...]
[...] CSS World ClocksAnother interesting experiment that uses CSS3 and a bit of PHP to create an interactive clock. [...]
[...] angles (such as the strings) are masked using containers with overflow: hidden; set on them. CSS World ClocksAnother interesting experiment that uses CSS3 and a bit of PHP to create an interactive clock.3D [...]
Some delicious looking CSS3 clocks. I love the design too, looks like it should be in my office! =P
[...] CSS World ClocksAnother interesting experiment that uses CSS3 and a bit of PHP to create an interactive clock. [...]
[...] CSS World Clocks Another interesting experiment that uses CSS3 and a bit of PHP to create an interactive clock. [...]
[...] Horloges du monde CSS Une autre expérience intéressante qui utilise CSS3 et un peu de PHP pour créer une horloge interactive. [...]
[...] CSS World Clocks 这是一个通过CSS来实现的时钟效果，注意这其中没有用图片。 [...]
[...] [...]
[...] CSS World Clocks 这是一个通过CSS来实现的时钟效果，注意这其中没有用图片。 [...]