Those 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.
I 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.
Thank 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
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.
You 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?
Just 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.
For 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.
Why 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.
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:
> Why all the hate? It's not like you have to use these everywhere just because they exist.
I do, because I can guarantee that some self-proclaimed web designer will use them for absolutely no reason at all.
> 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.
This argument is so useless. "Well maybe someone wants to shoot themselves in the foot. Nobody can come up with any examples, but maybe."
> Attracting attention to options in a demo
None of the effects are really useful for that. Apart from them being too wacky ("did something break?"), anything transitive is bad for that anyway, because what if the user gets distracted for the split-second your animation runs? Fade in some persistent element for that.
> If we restricted web browsers to what developers think we should use, we'd still be using plain green text on black terminals.
Command-line tools are popular for a reason: They get shit done, and don't distract people with useless crap.
The internet consists of a lot more than business forms. I would be frustrated if I saw bouncing radio boxes when applying for a passport, but if I was playing a game or using a demo for a non-critical service, then I'd quite like them.
If a designer mis-uses them... well that's the designer's fault. People mis-use hammers, but it makes no sense to blame the hammer.
Some people do like to see 'useless crap' on some websites, and their opinions are just as valid as yours.
Indeed, totally agree,
every project is a self story, nobody has the rights or the expertise to say it's useless or good or bad, because what is bad for me could be good for you and viceversa.
Finally someone with an open mind. Its not about what is practical, it is about what is possible. Take what is possible and decide what is practical for your use case.
Because we're traumatized by bouncing pie charts, video backgrounds and parallax scrolling? Many people are eventually forced to use or worse - implement websites with stuff like this even when they really don't want to.
Also, because flashy web gimmics receive disproportionate amount of attention compared to less glamorous but practical concepts. Even here, on an ostensibly technical website.
The 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.
I 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.
I 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.
Agreed, 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.
Of course criticism is not forbidden - if it was, then I would be flagging these comments for deletion. Instead, I am criticising your comments, and that is also not forbidden nor only allowed on your terms. It works both ways.
You aren't making any criticisms, you're just throwing out a boilerplate demand for people not to harsh anyone's vibe by criticizing anything released open source. (Lest the OP figure out a way to release simple CSS classes in a proprietary format, I guess.) The criticisms aren't particularly "random" or "unfounded", they're on-point: this isn't something that "helps" much, it's just some CSS to make some basic, pointlessly distracting animations.
Your logic is wrong, because it rests on the assumption that everyone agrees using animated radio buttons is a bad idea. Given the number of GitHub stars, upvotes on here, and general use of animation like this across the internet, it's not universally considered a bad idea.
There is also a popular confusion that design has nothing to do with "making things look fun or pretty", and that anything done to make a site look more attractive is either a waste of time or counter-productive.
To some extent it is - sites with better UX will tend to become more popular. I agree that animated radio buttons is probably going to be a bad UX decision in the majority of cases.
The reason I mentioned its stars and upvotes is precisely to point out that some people may have a valid use case for this, and you can't rule it out completely for every radio button on every website.
You know, the number of upvotes on this submission is interesting. There have been much more impressive pure-CSS checkbox-styling and -animating demos, but those posts never got remotely the upvotes of this one.
It is not, we often use own little helper 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 :)
Used 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.
104 comments
[ 2.5 ms ] story [ 210 ms ] thread[1] https://github.com/720kb/radiobox.css/blob/master/lib/scss/b...
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.
Websites are means to an end, and that end is not staring in amazement at animations (or in frustration at your battery gauge).
( ) 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.
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.
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.
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.
* 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.
Just: .my-class{ animation: boing 2s etc...}
I do, because I can guarantee that some self-proclaimed web designer will use them for absolutely no reason at all.
> 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.
This argument is so useless. "Well maybe someone wants to shoot themselves in the foot. Nobody can come up with any examples, but maybe."
> Attracting attention to options in a demo
None of the effects are really useful for that. Apart from them being too wacky ("did something break?"), anything transitive is bad for that anyway, because what if the user gets distracted for the split-second your animation runs? Fade in some persistent element for that.
> If we restricted web browsers to what developers think we should use, we'd still be using plain green text on black terminals.
Command-line tools are popular for a reason: They get shit done, and don't distract people with useless crap.
If a designer mis-uses them... well that's the designer's fault. People mis-use hammers, but it makes no sense to blame the hammer.
Some people do like to see 'useless crap' on some websites, and their opinions are just as valid as yours.
I'd wager that there are more developers scared of the commandline than are comfortable with it.
That's basically what AMP and Facebook Pages are. They're far nicer to browse on mobile than 'unrestricted' news sites.
Still, I agree these have valid uses.
Be still, my beating heart ;)
Also, because flashy web gimmics receive disproportionate amount of attention compared to less glamorous but practical concepts. Even here, on an ostensibly technical website.
e.g.
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.
Why?
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.
The reason I mentioned its stars and upvotes is precisely to point out that some people may have a valid use case for this, and you can't rule it out completely for every radio button on every website.
I'm on mobile and wanted to zoom but you've used this in the demo page:
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.
I always find lack of good non-animation css for radio buttons and drop down select elements to be lacking.