Wristwatch in only HTML/CSS • Hacker News Board

Re: Wristwatch in only HTML/CSS

#21

Post by catshirt » Sun, Aug 12, 2012, 7:51 PM UTC

bvdbijl wrote: post #18

bti wrote: post #14

Earlier quoted context omitted.

Depends when you view it

"Even a broken clock is right twice a day"

depends on the broken behavior it exhibits.

Re: Wristwatch in only HTML/CSS

#22

Post by SCdF » Sun, Aug 12, 2012, 8:18 PM UTC

j15e wrote: post #7

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

Re: Wristwatch in only HTML/CSS

#23

Post by nnnnni » Sun, Aug 12, 2012, 9:46 PM UTC

Flam wrote: post #19

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

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

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

Re: Wristwatch in only HTML/CSS

#24

Post by brianshumate » Sun, Aug 12, 2012, 10:40 PM UTC

Flam wrote: post #16

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)

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

Re: Wristwatch in only HTML/CSS

#25

Post by bkyan » Mon, Aug 13, 2012, 1:19 AM UTC

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

Re: Wristwatch in only HTML/CSS

#26

Post by hnriot » Mon, Aug 13, 2012, 2:02 AM UTC

Flam wrote: post #19

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

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

Re: Wristwatch in only HTML/CSS

#27

Post by rurounijones » Mon, Aug 13, 2012, 2:24 AM UTC

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

Re: Wristwatch in only HTML/CSS

#28

Post by sprobertson » Mon, Aug 13, 2012, 2:44 AM UTC

rurounijones wrote: post #27

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.

Re: Wristwatch in only HTML/CSS

#29

Post by DigitalSea » Mon, Aug 13, 2012, 3:01 AM UTC

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.

Re: Wristwatch in only HTML/CSS

#30

Post by html5web » Mon, Aug 13, 2012, 3:39 AM 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.

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.