Wristwatch in only HTML/CSS (opens in new tab)

(codepen.io)

74 pointsFlam13y ago35 comments

35 comments

33 comments · 13 top-level

nnnnni13y ago· 3 in thread

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

FlamOP13y ago

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

nnnnni13y ago

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

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

hnriot13y ago

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

1 more reply

rthprog13y ago· 3 in thread

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

silas13y ago

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

FlamOP13y ago

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

FlamOP13y ago

Image now removed courtesy of another commenter.

brianshumate13y ago· 2 in thread

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

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

FlamOP13y ago

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)

brianshumate13y ago

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

DigitalSea13y ago· 2 in thread

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.

biturd13y ago

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.

FlamOP13y ago

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.

alexquez13y ago· 2 in thread

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

html5web13y ago

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.

malandrew13y ago

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

bkyan13y ago· 2 in thread

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

FlamOP13y ago

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

bkyan13y ago

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.

rurounijones13y ago· 2 in thread

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

sprobertson13y ago

the comment in the JS states:

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

rurounijones13y ago

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

martin-adams13y ago· 2 in thread

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

bti13y ago

Depends when you view it

bvdbijl13y ago

"Even a broken clock is right twice a day"

1 more reply

j15e13y ago· 1 in thread

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

SCdF13y ago

It eats one of my cores completely..

bvdbijl13y ago· 1 in thread

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

FlamOP13y ago

Oops! Made the change. :P

timmyd13y ago

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.

FWeinb13y ago

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.

dmitriy_q13y ago

Cool thing!

j / k navigate · click thread line to collapse

35 comments

33 comments · 13 top-level

nnnnni13y ago· 3 in thread

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

FlamOP13y ago

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

nnnnni13y ago

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

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

hnriot13y ago

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

1 more reply

rthprog13y ago· 3 in thread

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

silas13y ago

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

FlamOP13y ago

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

FlamOP13y ago

Image now removed courtesy of another commenter.

brianshumate13y ago· 2 in thread

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

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

FlamOP13y ago

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)

brianshumate13y ago

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

DigitalSea13y ago· 2 in thread

biturd13y ago

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.

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.

FlamOP13y ago

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.

alexquez13y ago· 2 in thread

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

html5web13y ago

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.

malandrew13y ago

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

bkyan13y ago· 2 in thread

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

FlamOP13y ago

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

bkyan13y ago

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.

rurounijones13y ago· 2 in thread

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

sprobertson13y ago

the comment in the JS states:

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

rurounijones13y ago

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

martin-adams13y ago· 2 in thread

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

bti13y ago

Depends when you view it

bvdbijl13y ago

"Even a broken clock is right twice a day"

1 more reply

j15e13y ago· 1 in thread

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

SCdF13y ago

It eats one of my cores completely..

bvdbijl13y ago· 1 in thread

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

FlamOP13y ago

Oops! Made the change. :P

timmyd13y ago

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.

FWeinb13y ago

dmitriy_q13y ago

Cool thing!

j / k navigate · click thread line to collapse