Wristwatch in only HTML/CSS • Hacker News Board

Re: Wristwatch in only HTML/CSS

#11

Post by malandrew » Sun, Aug 12, 2012, 7:17 PM UTC

alexquez wrote: post #10

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.

Re: Wristwatch in only HTML/CSS

#12

Post by bvdbijl » Sun, Aug 12, 2012, 7:19 PM UTC

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

Re: Wristwatch in only HTML/CSS

#13

Post by martin-adams » Sun, Aug 12, 2012, 7:21 PM UTC

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

Re: Wristwatch in only HTML/CSS

#14

Post by bti » Sun, Aug 12, 2012, 7:25 PM UTC

martin-adams wrote: post #13

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

Depends when you view it

Re: Wristwatch in only HTML/CSS

#15

Post by Flam » Sun, Aug 12, 2012, 7:27 PM UTC

bvdbijl wrote: post #12

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

Re: Wristwatch in only HTML/CSS

#16

Post by Flam » Sun, Aug 12, 2012, 7:29 PM UTC

brianshumate wrote: post #9

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)

Re: Wristwatch in only HTML/CSS

#17

Post by Flam » Sun, Aug 12, 2012, 7:34 PM UTC

Flam wrote: post #5

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.

Image now removed courtesy of another commenter.

Re: Wristwatch in only HTML/CSS

#18

Post by bvdbijl » Sun, Aug 12, 2012, 7:34 PM UTC

bti wrote: post #14

martin-adams wrote: post #13

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

Depends when you view it

"Even a broken clock is right twice a day"

Re: Wristwatch in only HTML/CSS

#19

Post by Flam » Sun, Aug 12, 2012, 7:35 PM UTC

nnnnni wrote: post #8

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? ;)

Re: Wristwatch in only HTML/CSS

#20

Post by [deleted] » Sun, Aug 12, 2012, 7:45 PM UTC

martin-adams wrote: post #13

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

[deleted]