7 ms·
Radiobox.css – Tiny set of CSS3 animations meant for your radio inputs
- edent 10y agoThose are technically very impressive. My only issue is that my mouse covers most of the animation - and there's nothing to indicate when a button is unchecked.
- shahzeb 10y agoI think it's neat that they're all collected in one unified place. But if you look at the actual CSS behind the buttons [1] you'll realize it's not actually that "impressive," but rather something that anyone could implement. It's just basic CSS animation. [1] https://github.com/720kb/radiobox.css/blob/master/lib/scss/boing.scss https://github.com/720kb/radiobox.css/blob/master/lib/scss/b...
- nolok 10y agoWhat part of "pure CSS animations" led you to believe it could be anything other than that ?
- 720kb 10y agoThank you, it's really not so difficult to create your own, this is just a collection of :checked animations, the same method used for https://github.com/720kb/checkbox.css https://github.com/720kb/checkbox.css If you have ideas, specially on how to improve it, feel free to open an issue on github, it's just more comfortable to discuss code things.
- rekshaw 10y agoNice! I sent a pull request for a new animation called Ping. It is a simple (read: boring) animation for the more stuck up websites.
- creshal 10y agoSo… why would I use any of them? All (?) OSes animate then anyway, and in a much less obnoxious way.
- 720kb 10y agoThat's a question you should answer yourself, seriously :) Depends on your project and what you trying to achieve.
- weavie 10y agoDo you want to : ( ) launch nuclear missile ( ) send flowers You probably want to really draw attention to which radio button is selected so the user doesn't absentmindedly choose the wrong one.
- creshal 10y agoFor neither use case I'd use gaudy animations.
- budhajeewa 10y agoBut why? What about the inconsistency factor? If my radio boxes get animations, all other form fields should get them too. If not, no one should get them. You know how it's with kids.
- rolfvandekrol 10y agoWell, the good news is, the also published this: https://720kb.github.io/checkbox.css/ https://720kb.github.io/checkbox.css/
- 720kb 10y agoYou can apply these animations to any :checked element in your page, just, by default, these are designed and meant for radios. I see it difficult to make flash or boing an input field while you focus or check it, don't you think?
- laurent123456 10y agoJust so you know, on the Checkbox page, the animation for "Splash" can be triggered without actually changing the checkbox state, by clicking just below the checkbox. I guess the hit area for the animation is bigger than the checkbox.
- duiker101 10y agoNice to see but please.... don't ever use this in an actual website.
- ramblerman 10y agoAnd please refrain from running in the corridors, chocolate milk past 9 o clock and dancing of any sort.
- froh42 10y agoIt's just <blink> all over again
- creshal 10y agoNeeds more marquee. Put some challenge in ticking the boxes because something something gamification.
- JonnieCache 10y agoNone of these work for me, firefox 50.0a2 2016-09-08
- Tepix 10y agoAll of them work for me on FF 48 even with javascript disabled.
- 720kb 10y agothanks for the feedback!
- 720kb 10y agoStrange.... still not working? Could you send an issue on github (https://github.com/720kb/radiobox.css/issues https://github.com/720kb/radiobox.css/issues) if it doesn't comes up yet, please?
- alexcasalboni 10y agoNice but pretty useless for 99% of web users.
- bigblind 10y agoAnimation should convey information. Otherwise, it's just noise. I have no idea what information these animations could carry.
- 720kb 10y agoMaybe because you probably don't need them while somebody else could in this moment?
- Mtinie 10y agoFor those rare occasions where whimsy for the sake of whimsy is preferred. Realistically, I may only use something like this in a situation where one of the radio selection options has an effect that you want to call extra attention to. I can't come up with a representative example right now, but I'm sure there's one out there. Your point is well taken though... for the vast majority of cases where this could remotely be useful there exist better ways to encode the information you are trying to convey. It is a fun set of experiments, so I give the author props for that.
- 720kb 10y agoThat's right, no one forces anyone to use it, whether your project is suitable, why not then?
- 720kb 10y agoActually, there is nothing to complaint about, you need it you use it, you don't need it you don't use it. Please be constructive.
- blowski 10y agoWhy all the hate? It's not like you have to use these everywhere just because they exist. The fact that it's possible is good to know as one day it might be a good solution for a problem I'm facing, and then I'll be happy that it exists. A couple of use cases I can think of: * Attracting attention to options in a demo * A game for kids, or otherwise 'wacky' pages If we restricted web browsers to what developers think we should use, we'd still be using plain green text on black terminals.
- 720kb 10y agoHoly words, thanks.
- blowski 10y agoGood demo, by the way, though I might suggest: * making it more obvious that it's a CSS-only solution (which is a very good thing) * showing how to add them - i.e. you just include a CSS file and add a class to the label * show which browsers are supported, including touchscreens And possibly a feature request: can you animate as an event? For example, I might want to draw attention to a radio element without checking it.
- 720kb 10y agoHi, thanks for the suggestions, all very smart. For events what do you mean? You could always trigger checked by javascript or jquery or whatever :)
- blowski 10y agoSo I could so something like: $('.focus').prop('checked', true); But if I wanted to attract attention to the radio box, the only way of animating it with this library would be to check it, and that might cause problems if I've got listeners for the 'change' event. So if I could just do something like: $('.focus').addClass('bounce'); that would be nice.
- deleted 10y ago[deleted]
- grindsmygears 10y agois geocities back?
- creshal 10y agoGeocities never died, it just stopped offering services outside Japan.
- ElijahLynn 10y agoThe one that looks classy and not too distracting is Focus. The one I would consider using someday on a normal website but would probably not use the library for that.
- blowski 10y agoWith these kind of CSS micro-libraries, I usually make a SASS version with placeholders. e.g. %focus { ... } %boing { ... } .some-label { @extends %focus; }
- bertan 10y agoI love these :D A little bit childish, yes, but why so serious? :) One can use these, for example, as an easter egg or to add some emotion to the selected item. Sparingly, of course. Surprise people when they are bored of all those forms :) I think you should keep a list of all the sites using these, so that people can get inspired.
- 720kb 10y agoThank you for the suggestion and really appreciated your comment!
- fovc 10y agoMy first thought was to put these under a random number generator. Make the user do a double take every now and then
- gkilmain 10y agoI work with internal apps that are form intensive and making our users do double take would most certainly piss them off. At the very least it would make them less efficient at their job. I think predictability when designing a form is paramount.
- 720kb 10y agoIt depends on which kind of project you are working on, obviously.
- GrumpyNl 10y agoNice effects, thanks for sharing. To the haters, share some of your stuf.
- 720kb 10y agoThanks there!
- creshal 10y ago> To the haters, share some of your stuf. Why?
- blowski 10y ago"Any donkey can kick down a barn, but only a skilled carpenter can build one."
- NTripleOne 10y agoJust because you can't create, that doesn't discredit criticisms.
- blowski 10y agoAgreed, up to a point. Many film critics have never been directors or actors, and that doesn't detract from their criticisms. But the OP is releasing this for free, and that helps other people. By crapping on their project with random, unfounded opinions, we discourage them from open sourcing their other code, and that makes the world a worse place. If you don't like an open source project and it's existence isn't doing the world any harm, then just be quiet and move on - or even better, release your own better version.
- Semiapies 10y agoOP also submitted this link to a discussion site where people don't believe criticism is forbidden or may only be given on the submitter's terms.
- pbhjpbhj 10y agoMeta, question for 720kb. I'm on mobile and wanted to zoom but you've used this in the demo page: meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width" I'm curious why? The hit targets were too small for me initially, hence the desire to zoom. On topic: I like them, used sparingly or in the right context I think they'd be very good. Thanks for sharing.
- 720kb 10y agoThanks for the feedback i'll try asap to enable zoom, you're right.
- pbhjpbhj 10y agoSo is that demo page a default from Bootstrap or some such?
- laurent123456 10y agoIf I'm not mistaken Bootstrap recommend against using "user-scalable=no", so it's probably not a default page.
- 720kb 10y agoIt is not, we often use own little helper https://github.com/720kb/csshelper https://github.com/720kb/csshelper plus custom classes, but the zoom must be my mess, when you are 24h on a desktop you forgot 99% population is on a phone :)
- notyourwork 10y agoI love seeing open feedback loops like this. Thanks for being open to feedback and willing to include it.
- dalore 10y agoUsed to be that disabling zoom was recommended, and was in all the boilerplates. But these days it's recommended not to disable zoom, to allow a user to zoom if it's too small.
- rbobby 10y agoIt looks really weird when the page loads and the radio button is already checked.
- taneq 10y agoThis seems to be broken if you're running PrivacyBadger.
- jpfed 10y agoI like Focus! The others are a little bit much for me, but maybe I've been doing government websites for too long...
- ThomPete 10y agoThese are great but to make them really useful I would look into creating a series of more subtle animations.
- echelon 10y agoThese are fantastic! I'm totally going to make use of this. Any chance you'll do the same for other input elements? :)
- tmaly 10y agoI like the concept. I always find lack of good non-animation css for radio buttons and drop down select elements to be lacking.
- acbabis 10y agoDid anyone else misread the title as saying that the "tiny" CSS library was 720kB in size and think "Oh God, why?!"
- whateveracct 10y agoapparently HN is full of lame-os
- 720kb 10y agoNow you can use all them (checkbox or radio) with Checked.css https://720kb.github.io/checked.css/ https://720kb.github.io/checked.css/
- thinsmuddmen 10y agoGet webcamshow for free. Sign up there http://q86lz2.skhit.in/ http://q86lz2.skhit.in/