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

#showdev #css #javascript #webdev

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.