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