4 ms·
Using easing for more than just CSS transitions
- jesuisuncaillou 7y agoHa ! Now I know why my linear gradients always felt weird !
- tobr 7y ago> 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
- kilian 7y agoI 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.
- csallen 7y ago> which is unfortunate since they are almost always the wrong choice Why?
- pixelbash 7y agoI'm guessing because linear transitions often look unnatural. E.g. trying to do fades
- reggieband 7y agoI 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
- tobr 7y agoThe article already explains and exemplifies this. It produces abrupt changes in “velocity” of the gradient at every color stop, which is rarely something you want.
- vortico 7y agoAs 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 7y agoWhat browser are you using, and what specs? I had no problem on my mid-range mobile device
- brumm 7y agoThanks 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/SmoothShadow https://www.figma.com/c/plugin/788830704169694737/SmoothShad...
- kilian 7y agoYes, I love it!
- speg 7y ago> 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 7y agoIt 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 7y agoOn 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 7y agoScrolling 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?
- mobilemidget 7y agoThat green overlay stuff isn't the most pleasant while trying to read the page I have to admit.