7 ms·
Stopwatch in CSS
- oneeyedpigeon 13y agois something supposed to happen when I press play (safari, iPad)?
- hayksaakian 13y agoThe time starts ticking (chrome beta, android) It'd be cool if I could read the time via JS
- mctx 13y agoYou can - try something like this: parseInt(getComputedStyle($('#seconds'), ':after').top)/-76 (see https://gist.github.com/alexlouden/7481780 https://gist.github.com/alexlouden/7481780 for full)
- maho 13y agoFor me, the button font doesn't load and the background transisiotions are, as always, extremely sluggish. (Firefox 17 ESR)
- drinchev 13y agoLooks great and works on Chrome. The idea is pretty nice.
- adam12 13y agoThe buttons don't work for me in Chrome 31.0.1650.57 m
- aimhb 13y agoGreat example of a cool trick using completely the wrong tool for the job.
- mnsc 13y agoCool, you managed to untangle your hair using 5 pencils and some tape, now go buy a comb and never do that again.
- corresation 13y agoWhether it is the wrong tool is arguable (it is a clever declarative implementation). But regardless, demos such as this primarily demonstrate features and functions of a technology in a novel way, and it seems likely many who view will have a 'you can do that with CSS?' reaction, perhaps taking it to add to more traditional implementations.
- mnsc 13y agoAnd the risk is they'll get inspired and try to solve another problem with css and a "clever declarative implementation" only that is better solved with the appropriate technology. I'm not saying these tech explorations are bad, they just need to have a big fat disclaimer "don't try this in prod" and preferably a reference implementation of how it would be done "properly".
- corresation 13y agoand preferably a reference implementation of how it would be done "properly" Any implementation could be torn to shreds. Because that's how the evolutionary, competitive nature of technology works. Nothing is "right" or "wrong", to use the scarequotes so in fashion, but is from a perspective and position. If things needed disclaimers around here -- as if we're all idiots, or worse jaded cynics -- then I think it would be a bad day for HN.
- mnsc 13y agoThe disclaimer wasn't for the HN crowd necessarily. And the reference implementation would be useful for both showing "the proper way" and acting like a contrasting view. I don't understand animating with css so I would love to see "this is how you would accomplish the same thing using javascript", which I (without understanding css animation) believe is the right tool. But of course, houndres of insane trick-focused css gurus churning out millions of crazy tech demos... Surely someone will find out some novel, more useful technique that we conservative programmers will begin to use for making the boring shit we do less burdensome. So I'm all for it really, despite my initial negative tone.
- jakejake 13y agoReally cool! Would anybody care to enlighten me on how the start/stop buttons work? I see that they add an anchor to the URL but I couldn't figure out how that triggers the style change. Thanks for sharing!
- addedlovely 13y ago:target pseudo selector
- jakejake 13y agoah cool thanks
- raganesh 13y agoThis is cool. But should the fourth section (sub-seconds) be running from 0-99? It is currently running from 0-59, too. Sorry about the nitpick; this really is a cool implementation :-)
- paullaros 13y agoUpdated! Thanks for your feedback.
- mmahemoff 13y agoThere's actually a genre of pure-CSS games [1]. CSS3 Panic was interesting as (I think) the first one to keep score. 1. http://thejavascripthomework.wordpress.com/2012/10/13/15-pure-css3-games/ http://thejavascripthomework.wordpress.com/2012/10/13/15-pur... 2. http://cssdeck.com/labs/css-panic-game http://cssdeck.com/labs/css-panic-game
- csmuk 13y agoGoes absolutely bat shit in IE11 flickering and all sorts going on. Then again what do I expect? Works fine in Chrome and Firefox.
- mattmanser 13y agoI love how the stop button is just a link to the page. Smart.
- vog 13y agoNice work, but I find it a bit disappointing that the first thing I see on a "CSS-only" site is a big warning from NoScript. I think this site would make its point more clear if it didn't contain any JavsScript, even though it's just for Google Analytics.
- kalleboo 13y agoVery cool hack! I've had CSS animations go out of sync before in Safari, so I presume this wouldn't be a very accurate timer in the long run...
- raldi 13y agoCould someone post a summary of how it works, for the benefit of those of us reading HN on our phones? Edit: I'm not asking what it does, but how.
- crisnoble 13y agoIt is literally a stopwatch. You click play, you click pause, you click stop and it behaves exactly like the Seiko hanging from your gym teacher's neck. The interesting part is that it works with nothing but HTML/CSS, and the animations are flawless while the design is clean. Also, does it really not work on the phone?
- claybinion 13y agoI think he was talking about how it works from a programming perspective. He possibly can't view source on his phone. Edit: For the record it works and looks fine on my android phone, better than Chrome on my desktop in my opinion.
- ChikkaChiChi 13y agoFastest time from play to pause seems to be 00:00:00:16. I think the fade animation prevents the DOM from responding any faster. (What, doesn't everyone do the 'see how fast you can stop it' test to every stopwatch ever put into their hands?
- Dirlewanger 13y agoThe entire page color change hurts.
- rohitv 13y agoIt's behaving really weird for me. Initially the milliseconds go from 0 to 99 repeatedly. After click on play, the seconds start increasing and when paused it is paused but the milliseconds still go from 0-99 repeatedly. Similar behaviour with stop, it resets the seconds but milliseconds still go from 0-99 repeatedly.I'm on Chrome 31. Aside from that, great work :)
- mrcactu5 13y agowhat does "pure CSS" mean? no javascript ?