Wristwatch in only HTML/CSS | Hacker News Reader

Wristwatch in only HTML/CSS

codepen.io

74 pointsFlam35 comments

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.

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

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

I'm going to take this as a pull request and adjust my pen. How would you like to be credited? (name/link/anything else)

Thanks for the cool project. I'm also brianshumate on Github & a link there is cool.

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

I removed the image completely now courtesy of another commenter. Anyhow, wouldn't base64 be cheating? ;)

Nope, it makes it self-contained, therefore more pure!

...or at least that's the way I look at it.

well, technically you're using javascript, so it's already cheating. Obviously, you have to use it, but it does break the claim of using only html/css

The javascript was added much later by popular demand to make the time accurate. Remove it and it remains functional.

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%.

It eats one of my cores completely..

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.

I don't know much about CPU's and which ones are better than others. They all seem fast enough to run a text editor and a browser for my needs.

That being said — I seem to have no issues viewing a fully functional watch on an iPhone 4S. The areas I actually have trouble with seem to be the usual suspects — the code display doesn't translate to touch at all so I can't scroll vertically to see how this was done beyond what is shown as a "page" worth of code.

Call me impressed in general with the work that was done. Call me doubly impressed that it works on a computer that fits in my pocket and had a primary purpose at one time of making telephone calls.

I added the JS much after the fact that I posted this here due to popular demand to make it accurate.

Remove the JS and it remains functional, as in the first version.

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

There's only one image for the band's texture. The rest is CSS.

Image now removed courtesy of another commenter.

Only one (wristband texture) and removing it still produces a pretty good result: http://codepen.io/anon/pen/LmEkn

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

AFAIK a CSS3 3D transform of 0,0,0 with preserve 3d should push the work to the GPU.

Main page of codepen.io uses JS code to kill animations after 3-5 secs. When you click on single codepens it opens without JS animation killing restrictions.

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! :)

Maybe I misunderstood but isn't it right there on line 222?

For line 222, I see: transform-origin: 0% 50%;

I needed: -webkit-transform-origin: 0% 50%;

It didn't work in my chrome browser without the "-webkit-" one.

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

Oops! Made the change. :P

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...

the comment in the JS states:

    The following JS is only added to start the time at your local time.

Welp, that is me looking like an idiot, I totally missed that.

Cool thing!

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

Depends when you view it

"Even a broken clock is right twice a day"

depends on the broken behavior it exhibits.

Reply on news.ycombinator.com