loading...

CSS variables, input[type="color"] and form animations

rose profile image Rose ・2 min read

I was contemplating not sharing this because I was like "Meh it's pretty simple, anyone can do it" but then I reminded myself that the word "simple" is very relative, and there was a time in my life when this would have made me 🤯

(this is a good thing to think about for anyone who hesitates on writing blog posts! Just because you think "everybody knows this stuff" doesn't mean it's true. Lots of people do NOT know this stuff.)

Anyway, I was just in the mood to play around with checkbox/radio button animations and as I went along got carried away and added customization. Here we are:

Quick stuff to know about

  • Checkbox "x" animations use CSS gradients for the progressive "growing" of the x/"filling" of the box
  • The x elements themselves are ::before and ::after pseudo elements rotated on an angle so that they form diagonal lines, crossed over one another.
  • Radio buttons use "scale" transition animation for the circle to grow-in/shrink-in
  • <input type="color"> is how you get that color picker input
  • CSS Custom Properties (variables) are how you easily have the user pick a color.
  • I found this little colour manipulation library so that after someone picks a colour, I can find lighter/darker versions.
  • 🐛 Safari is annoying in that when you change the accent colour, it doesn't seem to properly update already-checked items that used a gradient animation, so you have to uncheck and recheck. Chrome/Firefox seem to update correctly.

You can of course view the source to see all the nitty gritty 🙂

Posted on by:

rose profile

Rose

@rose

Dev by profession and hobby. Not a ton of time for hobbies these days though! Mom of two young kids. Also really into dog training (agility, nose-work, advanced obedience, etc) & reading fiction. 😃

Discussion

markdown guide
 

thank you for sharing! I'm kind of new to Web dev and learning this "simple" things is always great 💚

 

This is a great little UX enhancement and I definitely didn't know about this. Nice!

 

Nice. I like these little animations as they're suttle. Looking forward to your next post!

 

Nice UX improvement !
Thank you

 
 

I don't see any difference between Radio Buttons and Radio Buttons Inverse. Am I missing something?

 

It's pretty subtle but in one case the circle grows larger from the center and on the other it shrinks inwards :)