
Radiobox.css – Tiny set of CSS3 animations meant for your radio inputs - 720kb
https://720kb.github.io/radiobox.css/
======
blowski
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.

~~~
vacri
> _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.

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

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

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

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

~~~
720kb
It depends on which kind of project you are working on, obviously.

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

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

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

~~~
720kb
It 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 :)

------
720kb
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
People like to comment on things because feedback and discussion helps you and
others do better work later on.

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

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

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

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

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

------
edent
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
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...](https://github.com/720kb/radiobox.css/blob/master/lib/scss/boing.scss)

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

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

~~~
creshal
> To the haters, share some of your stuf.

Why?

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

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

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

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

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

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

~~~
Semiapies
No, I don't believe that confusion exists.

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

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

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

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

~~~
720kb
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?

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

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

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

~~~
blowski
For some websites, that _is_ the end. Not all websites, but some.

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

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

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

~~~
creshal
For neither use case I'd use gaudy animations.

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

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

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

------
tmaly
I like the concept.

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

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

------
whateveracct
apparently HN is full of lame-os

------
froh42
It's just <blink> all over again

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

------
grindsmygears
is geocities back?

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

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

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

~~~
720kb
thanks for the feedback!

------
alexcasalboni
Nice but pretty useless for 99% of web users.

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

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

e.g.

    
    
        %focus { ... }
        %boing { ... }
    
        .some-label { @extends %focus; }

