

Wristwatch in only HTML/CSS - Flam
http://codepen.io/TheSisb/pen/eAHyJ

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

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

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

~~~
Flam
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)

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

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

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

~~~
hnriot
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

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

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

~~~
SCdF
It eats one of my cores completely..

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

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

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

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

~~~
Flam
Image now removed courtesy of another commenter.

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

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

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

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

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

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

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

~~~
Flam
Oops! Made the change. :P

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

~~~
sprobertson
the comment in the JS states:

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

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

------
dmitriy_q
Cool thing!

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

~~~
bti
Depends when you view it

~~~
bvdbijl
"Even a broken clock is right twice a day"

~~~
catshirt
depends on the broken behavior it exhibits.

