Theory behind the shadows

[roblevintennis]

The shadows are nice! I've read from time to time some Google articles (I think) about these sorts of multi-layered shadows but I forget how the theory works. Did you based yours off of a methodology I can go read about to refresh myself there? Kudos on these :-)

---

This is a separate question so sorry if it should be in its own thread but I've already opened too many haha:

@use postcss-preset-env {
  stage: 0;
  features: {
    "logical-properties-and-values": false
  }
} 

That's essentially telling post css don't neuter margin-block-start for any browsers, correct? Btw, love logical properties for automatic writing modes and direction ftw! 🏆 I use it in AgnosticUI which is raw CSS with no pre / post processing...but if I was going to use anything I'd totally use postcss like you're doing in OP which is so sensible 👍

[argyleink]

hi again! 🙂

the shadows are an adaptation of output from this great tool https://shadows.brumm.af/. I took the sub pixel values out of it and used hsl so i could make it adaptive to light/dark. for additional study you can check this out, which is another adaptation of the easing shadows from Brumm https://www.joshwcomeau.com/css/designing-shadows/ 👍🏻

and yep, "logical-properties-and-values": false is to tell the compiler to not create physical properties as fallbacks and dont prefix any logical properties. they're stable in all major browsers now, and def kick butt, i love em.

[roblevintennis]

🙂

I'm with you on logical properties and hopefully I do not have a margin-left in AgnosticUI common at all! Hey IE11 is EOL in the summer so why not get direction agnostic for free!

I'm on my iPhone but excited to visit those wonderful resources later today--thanks!

I noticed when tinkering that the usefulness of the higher -N shadows appears to depend a lot on the darkness of the page or card or both. More interesting stuff to contemplate and figure out how I'd incorporate 🎉

[roblevintennis]

I've marked this as answered but I have another question/concern reading the designing shadows article. I was actually was wondering intuitively what the performance impacts of layering these shadows might be in terms of practical usage throughout a web app across various device types? It seems there's a big warning about this in the article.

[argyleink]

his comments there are similar to what i'd say, but i'll comment on his statements since it sounds like you're tentative:

layered shadows don't affect performance in a significant way, but I've also never tried to use dozens or hundreds at the same time.

layered shadows don't affect performance in a significant way. this wasnt the case in like ~2010, but browser optimizations have come a long way. box-shadows are the least of your issues, unless you're using dozens or hundreds.

Also, it's probably a bad idea to try animating a layered shadow

can't gpu accelerate a shadow animation, but that doesnt mean they wont be smooth in many use cases. i do agree that animating multiple layered shadows is a bad idea, but hey, you do you.

all in all, unless you're abusing shadows, the browser is ready to draw you some multi-layered shadows. they dont affect layout, so that alone makes them way cheaper than other properties folks fiddle and animate with (like height).

[roblevintennis]

Reread that performance callout in the article and I'm not sure why I didn't hone in on the section you quoted--yeah it sounds like animating those or using ridiculous amounts of these would be the only cause of concern. Unlikely use cases agreed 👍🏽 let there be beautiful shadows 🎉