Radiobox.css – Tiny set of CSS3 animations meant for your radio inputs | Hacker News Reader

Radiobox.css – Tiny set of CSS3 animations meant for your radio inputs

720kb.github.io

234 points720kb100 comments

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.

Holy words, thanks.

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

Hi, thanks for the suggestions, all very smart. For events what do you mean? You could always trigger checked by javascript or jquery or whatever :)

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

Oh, understood what you mean, you could use the animation name, it's included in the CSS files.

Just: .my-class{ animation: boing 2s etc...}

Pointing out it's not 720kb in size :)

Fortunately i'd say ;P

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

> If we restricted web browsers to what developers think we should use, we'd still be using plain green text on black terminals.

I'd wager that there are more developers scared of the commandline than are comfortable with it.

Yes, I should have said 'some developers'. Suggesting all developers believe a certain thing is a massive over-generalisation.

Now, yes. But you only have to turn the clock back a decade or three to find most devs were comfortable with the command line.

It's those grey beards! #ageism

> If we restricted web browsers to what developers think we should use

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.

> If we restricted web browsers to what developers think we should use, we'd still be using plain green text on black terminals.

Be still, my beating heart ;)

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.

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.

Thank you for the suggestion and really appreciated your comment!

My first thought was to put these under a random number generator. Make the user do a double take every now and then

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 depends on which kind of project you are working on, obviously.

Meta, 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.

Thanks for the feedback i'll try asap to enable zoom, you're right.

So is that demo page a default from Bootstrap or some such?

If I'm not mistaken Bootstrap recommend against using "user-scalable=no", so it's probably not a default page.

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

I love seeing open feedback loops like this. Thanks for being open to feedback and willing to include it.

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.

Should work now, talking about the scalable zoom, let know if still any trouble or problem.

Actually, 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.

People like to comment on things because feedback and discussion helps you and others do better work later on.

You're right, as soon as they comment constructively: like you do :)

I like Focus! The others are a little bit much for me, but maybe I've been doing government websites for too long...

Animation should convey information. Otherwise, it's just noise. I have no idea what information these animations could carry.

Maybe because you probably don't need them while somebody else could in this moment?

That's not an answer to the question.

There wasn't actually a question posed, just a complaint that he couldn't see a point.

The question of a point is implicit.

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.

That's right, no one forces anyone to use it, whether your project is suitable, why not then?

It conveys "you selected a thing.".

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.

[1] https://github.com/720kb/radiobox.css/blob/master/lib/scss/b...

What part of "pure CSS animations" led you to believe it could be anything other than that ?

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.

Nice effects, thanks for sharing. To the haters, share some of your stuf.

Thanks there!

> To the haters, share some of your stuf.

Why?

"Any donkey can kick down a barn, but only a skilled carpenter can build one."

Just because you can't create, that doesn't discredit criticisms.

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.

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

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.

I don't need to be a carpenter to say that maybe building a barn out of cotton candy and air balloon animals might not be the best idea.

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.

UX design is not a popularity contest, for fuck's sake.

There is a popular confusion of "design" and "making things look fun or pretty".

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.

Agree.

No, I don't believe that confusion exists.

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.

I dunno, I can see some daylight between skilled carpentry and slapping around some cute CSS.

Nice to see but please.... don't ever use this in an actual website.

And please refrain from running in the corridors, chocolate milk past 9 o clock and dancing of any sort.

Did anyone else misread the title as saying that the "tiny" CSS library was 720kB in size and think "Oh God, why?!"

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

Well, the good news is, the also published this: https://720kb.github.io/checkbox.css/

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.

Nice! I sent a pull request for a new animation called Ping. It is a simple (read: boring) animation for the more stuck up websites.

> the more stuck up websites.

Websites are means to an end, and that end is not staring in amazement at animations (or in frustration at your battery gauge).

For some websites, that is the end. Not all websites, but some.

Thank you, saw that and replied :)

These are great but to make them really useful I would look into creating a series of more subtle animations.

So… why would I use any of them? All (?) OSes animate then anyway, and in a much less obnoxious way.

That's a question you should answer yourself, seriously :) Depends on your project and what you trying to achieve.

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

For neither use case I'd use gaudy animations.

Now you can use all them (checkbox or radio) with Checked.css https://720kb.github.io/checked.css/

This seems to be broken if you're running PrivacyBadger.

These are fantastic! I'm totally going to make use of this. Any chance you'll do the same for other input elements? :)

I like the concept.

I always find lack of good non-animation css for radio buttons and drop down select elements to be lacking.

It looks really weird when the page loads and the radio button is already checked.

apparently HN is full of lame-os

It's just <blink> all over again

Needs more marquee. Put some challenge in ticking the boxes because something something gamification.

is geocities back?

Geocities never died, it just stopped offering services outside Japan.

None of these work for me, firefox 50.0a2 2016-09-08

All of them work for me on FF 48 even with javascript disabled.

thanks for the feedback!

Strange.... still not working? Could you send an issue on github (https://github.com/720kb/radiobox.css/issues) if it doesn't comes up yet, please?

Nice but pretty useless for 99% of web users.

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.

With these kind of CSS micro-libraries, I usually make a SASS version with placeholders.

e.g.

    %focus { ... }
    %boing { ... }

    .some-label { @extends %focus; }

Reply on news.ycombinator.com