9 ms·
Wristwatch in only HTML/CSS
- nnnnni 14y agoReplace line 58 with a base64 encoding of the image to make it pure HTML/CSS!
- Flam 14y agoI removed the image completely now courtesy of another commenter. Anyhow, wouldn't base64 be cheating? ;)
- nnnnni 14y agoNope, it makes it self-contained, therefore more pure! ...or at least that's the way I look at it.
- hnriot 14y agowell, 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 14y agoThe javascript was added much later by popular demand to make the time accurate. Remove it and it remains functional.
- dmitriy_q 14y agoCool thing!
- timmyd 14y agoI 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.
- rthprog 14y agoVery cool! Though the title isn't quite right - there definitely are images in the source, so it's not actually 'only HTML/CSS'
- j15e 14y agoVery 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 14y agoIt eats one of my cores completely..
- brianshumate 14y agoHere's a zero image version: http://codepen.io/anon/pen/rEfKk http://codepen.io/anon/pen/rEfKk Using a CSS texture from http://lea.verou.me/css3patterns/ http://lea.verou.me/css3patterns/
- Flam 14y agoI'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 14y agoThanks for the cool project. I'm also brianshumate on Github & a link there is cool.
- alexquez 14y agoYea, CSS animations are insanely CPU heavy. CodePen has to kill them after 5 seconds to keep the site responsive.
- bvdbijl 14y agoShouldn'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 http://codepen.io/anon/full/nieIh
- Flam 14y agoOops! Made the change. :P
- martin-adams 14y agoummm, anyone else notice the time is wrong ... :)
- bkyan 14y agoThe 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! :)
- rurounijones 14y agoIs 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 14y agothe comment in the JS states: The following JS is only added to start the time at your local time.
- rurounijones 14y agoWelp, that is me looking like an idiot, I totally missed that.
- DigitalSea 14y agoA 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 14y agoI 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.
- Flam 14y agoI 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.
- FWeinb 14y agoAwesome 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 http://hackerne.ws/item?id=4344107 Hope you like it.