from Hacker News

Wristwatch in only HTML/CSS

by Flam on 8/12/12, 3:21 PM with 35 comments

• by timmyd on 8/12/12, 4:01 PM

  I love it how the HTML is 30 lines and the CSS is like 300 or so. It's an awesome watch.

  Keyframes are a beautiful thing in CSS but boy oh boy I wish jQuery implemented them to reduce CSS size. It's becomming insane to have so many keyframes with 0%, 40%, 80%, 100% and so on.

• by brianshumate on 8/12/12, 5:44 PM

  Here's a zero image version: http://codepen.io/anon/pen/rEfKk

  Using a CSS texture from http://lea.verou.me/css3patterns/

• by nnnnni on 8/12/12, 5:42 PM

  Replace line 58 with a base64 encoding of the image to make it pure HTML/CSS!

• by j15e on 8/12/12, 5:29 PM

  Very cool, but I am still amazed by how CSS animations are killing modern desktop CPU. I guess this is because my Chrome browser is not using GPU acceleration for CSS?

  If I duplicate 10 times the watch, my CPU hits 100%.

• by DigitalSea on 8/13/12, 3:01 AM

  A little disappointed to see Javascript being used even if it's only for getting a users local time. Seems like a trivial thing to me when just having a CSS wristwatch is awesome enough without having to make it accurate. Besides that, this is awesome. Funny to see that a lot of the CSS is in-fact browser prefixed CSS and that if all browsers supported the same properties it would be much smaller.

  Aside: the CSS animations absolutely decimate my core i7 PC and almost makes Chrome become unresponsive. The CPU usage is through the roof, can't wait until CSS animations are stable and more widely supported.

• by rthprog on 8/12/12, 4:34 PM

  Very cool! Though the title isn't quite right - there definitely are images in the source, so it's not actually 'only HTML/CSS'

• by alexquez on 8/12/12, 6:26 PM

  Yea, CSS animations are insanely CPU heavy. CodePen has to kill them after 5 seconds to keep the site responsive.

• by FWeinb on 8/13/12, 7:52 AM

  Awesome wristwatch a while ago I created a WordClock. The Clock is pure CSS. The logic is made in JS. The idea comes from a German company called Biegert & Funk. http://hackerne.ws/item?id=4344107 Hope you like it.

• by bkyan on 8/13/12, 1:19 AM

  The exposed CSS source code seems to be missing the following:

  #glass #center #smallHand, #glass #center #midHand, #glass #center #bigHand { -webkit-transform-origin: 0% 50%; }

  It's working in your demo, so I'm guessing you simply forgot to copy it over to the exposed CSS source code? Awesome work, by the way! :)

• by bvdbijl on 8/12/12, 7:19 PM

  Shouldn't lines 217-221 have 12*3600 = 43200s instead of 86400? Because now it's a 24 hours watch. Fixed: http://codepen.io/anon/full/nieIh

• by rurounijones on 8/13/12, 2:24 AM

  Is it generally accepted that "only HTML/CSS" really means "HTML/CSS/JS"?

  To me the title is inaccurate but no one else seems to have mentioned it so...

• by dmitriy_q on 8/12/12, 3:27 PM

  Cool thing!

• by martin-adams on 8/12/12, 7:21 PM

  ummm, anyone else notice the time is wrong ... :)