Wristwatch in only HTML/CSS

#1

Post by Flam » Sun, Aug 12, 2012, 3:21 PM UTC

Wristwatch in only HTML/CSS
codepen.io

Re: Wristwatch in only HTML/CSS

#2

Post by dmitriy_q » Sun, Aug 12, 2012, 3:27 PM UTC

Cool thing!

Re: Wristwatch in only HTML/CSS

#3

Post by timmyd » Sun, Aug 12, 2012, 4:01 PM UTC

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.

Re: Wristwatch in only HTML/CSS

#4

Post by rthprog » Sun, Aug 12, 2012, 4:34 PM UTC

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

Re: Wristwatch in only HTML/CSS

#5

Post by Flam » Sun, Aug 12, 2012, 4:58 PM UTC

rthprog wrote: post #4

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.

Re: Wristwatch in only HTML/CSS

#6

Post by silas » Sun, Aug 12, 2012, 4:58 PM UTC

rthprog wrote: post #4

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

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

Re: Wristwatch in only HTML/CSS

#7

Post by j15e » Sun, Aug 12, 2012, 5:29 PM UTC

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