Here's a zero image version: http://codepen.io/anon/pen/rEfKk
Using a CSS texture from http://lea.verou.me/css3patterns/
Replace line 58 with a base64 encoding of the image to make it pure HTML/CSS!
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%.
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.
Very cool! Though the title isn't quite right - there definitely are images in the source, so it's not actually 'only HTML/CSS'
Yea, CSS animations are insanely CPU heavy. CodePen has to kill them after 5 seconds to keep the site responsive.
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.
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! :)
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
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...
Cool thing!
ummm, anyone else notice the time is wrong ... :)
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.