DEV Community

Cover image for How to Build a Color Wheel with Tints & Shades

How to Build a Color Wheel with Tints & Shades

Mads Stoumann on April 23, 2021

I've built a handful of color pickers through the years, so when I in this book stumbled upon a color-wheel with β€œbuilt-in” shades and tints, I had...
Collapse
 
afif profile image
Temani Afif

My CSS only idea: codepen.io/t_afif/pen/VwPqGyj and with rotation: codepen.io/t_afif/pen/KKabxJJ (need more html here)

Collapse
 
shaijut profile image
Shaiju T

Nice πŸ˜„, Can you show us how to make CSS based animations like Thank you and Successful and congrats messages to users, using confetti css or some other technique. Like below:

tympanus.net/Development/AnimatedM...

Example:

  1. Google Play Successful Payment animation with a tick mark and Confetti
  2. Hackerearth Congrats Confetti as shown here
Collapse
 
afif profile image
Temani Afif • Edited

are you challenging me ? πŸ˜›

Ok, I will think about it, maybe this will be my next post πŸ˜‰

Thread Thread
 
shaijut profile image
Shaiju T • Edited

Not challenging. Just asking if you have seen those kind of messages anywhere. I dont know how they do those kind of animation maybe using CSS or SVG.

Just want to learn cool CSS animations πŸ˜„

Thread Thread
 
afif profile image
Temani Afif

Such animations are generally made using canvas. If you inspect the code you will notice a <canvas> element and then you have to dig into the JS because it's there where you will find the whole logic

Collapse
 
madsstoumann profile image
Mads Stoumann • Edited

Nice! But it has the same issue on Chrome (MacOS), as I encountered - the edges are blurry :-(
That's why I went the svg-way, although the CSS-way is way simpler!
Looks great in Safari, though!

blurry

Collapse
 
braydoncoyer profile image
Braydon Coyer

Lovely! Thanks for sharing!

Collapse
 
madsstoumann profile image
Mads Stoumann

Thank you!