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

https://720kb.github.io/radiobox.css/

by 720kb • 10 years ago

234 100 10 years ago

720kb.github.io

edent• 10 years ago

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.

shahzeb• 10 years ago

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

nolok• 10 years ago

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

720kb23• 10 years ago

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.

rekshaw• 10 years ago

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.

creshal9• 10 years ago

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

blowski13• 10 years ago

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

720kb23• 10 years ago

Thank you, saw that and replied :)

creshal9• 10 years ago

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

720kb23• 10 years ago

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

weavie• 10 years ago

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.

creshal9• 10 years ago

For neither use case I'd use gaudy animations.

budhajeewa• 10 years ago

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.

rolfvandekrol• 10 years ago

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

720kb23• 10 years ago

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?

laurent1234562• 10 years ago

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.

duiker101• 10 years ago

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

ramblerman• 10 years ago

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

froh42• 10 years ago

It's just <blink> all over again

creshal9• 10 years ago

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

JonnieCache• 10 years ago

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

Tepix• 10 years ago

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

720kb23• 10 years ago

thanks for the feedback!

720kb23• 10 years ago

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?

alexcasalboni• 10 years ago

Nice but pretty useless for 99% of web users.

bigblind• 10 years ago

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

720kb23• 10 years ago

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

Semiapies8• 10 years ago

That's not an answer to the question.

Mtinie• 10 years ago

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.

720kb23• 10 years ago

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

jpfed2• 10 years ago

It conveys "you selected a thing.".

720kb23• 10 years ago

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.

underyx• 10 years ago

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

720kb23• 10 years ago

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

blowski13• 10 years ago

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.

720kb23• 10 years ago

Holy words, thanks.

blowski13• 10 years ago

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.

creshal9• 10 years ago

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.

blowski13• 10 years ago

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.

vacri• 10 years ago

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.

blowski13• 10 years ago

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

swampthinker• 10 years ago

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.

edoceo• 10 years ago

It's those grey beards! #ageism

IshKebab• 10 years ago

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.

coldpie• 10 years ago

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

notyourwork2• 10 years ago

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.

gambler• 10 years ago

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.

grindsmygears• 10 years ago

is geocities back?

creshal9• 10 years ago

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

ElijahLynn• 10 years ago

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.

blowski13• 10 years ago

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

e.g.

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

    .some-label { @extends %focus; }

bertan• 10 years ago

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.

720kb23• 10 years ago

Thank you for the suggestion and really appreciated your comment!

fovc• 10 years ago

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

gkilmain• 10 years ago

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.

GrumpyNl• 10 years ago

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

720kb23• 10 years ago

Thanks there!

creshal9• 10 years ago

To the haters, share some of your stuf.

Why?

blowski13• 10 years ago

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

pbhjpbhj2• 10 years ago

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.

720kb23• 10 years ago

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

pbhjpbhj2• 10 years ago

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

notyourwork2• 10 years ago

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

dalore• 10 years ago

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.

720kb23• 10 years ago

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

rbobby• 10 years ago

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

taneq• 10 years ago

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

jpfed2• 10 years ago

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

ThomPete• 10 years ago

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

echelon• 10 years ago

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

tmaly• 10 years ago

I like the concept.

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

acbabis• 10 years ago

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

whateveracct• 10 years ago

apparently HN is full of lame-os

720kb23• 10 years ago

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

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

Related Stories