
Using easing for more than just CSS transitions - kilian
https://kilianvalkhof.com/2020/css-html/using-easing-for-more-than-just-css-transitions/
======
tobr
> And the way box shadows are implemented on the web is similar to gradients:
> they use a linear transition.

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](https://drafts.csswg.org/css-backgrounds-3/#shadow-blur)

~~~
csallen
> which is unfortunate since they are almost always the wrong choice

Why?

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

1\.
[http://persci.mit.edu/gallery/checkershadow](http://persci.mit.edu/gallery/checkershadow)

------
vortico
As soon as I scrolled to the "Easing for box shadows" section where the
examples were visible, my browser became laggy and dropped from 60Hz framerate
to about 15Hz. Use these with caution, and test on a range of devices your
visitors are using.

~~~
hadrien01
What browser are you using, and what specs? I had no problem on my mid-range
mobile device

------
brumm
Thanks for featuring my little shadow tool! I'm glad it's useful!

There's a figma plugin out now as well:
[https://www.figma.com/c/plugin/788830704169694737/SmoothShad...](https://www.figma.com/c/plugin/788830704169694737/SmoothShadow)

~~~
kilian
Yes, I love it!

------
jesuisuncaillou
Ha ! Now I know why my linear gradients always felt weird !

------
mobilemidget
That green overlay stuff isn't the most pleasant while trying to read the page
I have to admit.

------
speg
> And the difference between these is pretty big:

Am I the only one who can't tell the different between them (Easing for box
shadows)?

~~~
reroute1
It is a bit subtle, I think the background of the page and the text below
isn't doing it a favor.

Quickly in the browser giving the <p> below a margin-top of 150px and then
moving it over a white part of the background (or making it white if you
like), the effect becomes more obvious and it does look a bit blockier around
the edges to me in the linear example. I would prefer the second as I'm seeing
it.

------
drenvuk
On Firefox this website lags from the get go. I think you should have all your
ducks in a row before offering advice on features related to what you're
talking about.

~~~
zamadatix
Scrolling through it on Firefox I get <1% CPU and <2% GPU without seeing any
lag. Curious if you have hardware acceleration working? Or maybe you're
hitting a corner case bug?

