Re:Using easing for more than just CSS transitions
by kilian on Tuesday January 07, 2020 @01:24PM
(#21982884)
I stand corrected, I’ll update the article!
If you compare the regular box shadow to the stepped example, it’s very clear that the gaussian blur doesn’t look nearly as natural as the multi stepped one.
Re:Using easing for more than just CSS transitions
by csallen on Tuesday January 07, 2020 @02:14PM
(#21983511)
> which is unfortunate since they are almost always the wrong choice
Why?
Re:Using easing for more than just CSS transitions
by reggieband on Tuesday January 07, 2020 @05:40PM
(#21985933)
I searched for a source but I couldn't find one. My recollection on the topic has to do with how humans perceive luminance within a gradient. Our eyes are better/worse at determining contrast differences between adjacent colours at different luminance. If you search for "luminance gradient" on Google you'll find a lot of scholarly articles on the subject but I was unable to track down one directly applied to graphic design. There is also a semi-famous demonstration [1] of how our eyes perceive gradients as shadows.
In general this isn't an issue since most designers will either just stretch the gradient out or add additional gradient control points to adjust to fall-off manually.
This is wrong. Yes, linear gradients are everywhere, even in nearly every professional graphic design tool, which is unfortunate since they are almost always the wrong choice. Box shadows, on the other hand, tend to be based on Gaussian blurs, which certainly doesn’t create a linear transition. This is also the way the CSS box-shadows spec say they should work: https://drafts.csswg.org/css-backgrounds-3/#shadow-blur