Better Box Shadows (CSS)

#1

Post by bradley_taunt » Wed, May 20, 2020, 1:12 AM UTC

Re: Better Box Shadows (CSS)

#2

Post by err4nt » Wed, May 20, 2020, 1:38 AM UTC

The blur filter is notoriously slow on performance. I find it interesting that the author didn't explore the "spread" parameter of box-shadow at all, I wonder if they realize it exists https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow

Re: Better Box Shadows (CSS)

#3

Post by deefour » Wed, May 20, 2020, 1:45 AM UTC

Your website is gorgeous.

Re: Better Box Shadows (CSS)

#4

Post by goblin89 » Wed, May 20, 2020, 1:47 AM UTC

Pure CSS box shadows without extra markup can be achieved with using negative spread (with increased blur to compensate) and multiple shadows. I believe it allows to achieve the exact look the author demonstrates at the end.

What I'd like to see is browser engines converge on identical box shadow rendering. Currently shadows tend to be more pronounced in Firefox relative to WebKit.

Re: Better Box Shadows (CSS)

#5

Post by zzo38computer » Wed, May 20, 2020, 1:51 AM UTC

deefour wrote: post #3

Your website is gorgeous.

I disagree. It uses too large fonts, too large boxes, to narrow areas, etc.

Re: Better Box Shadows (CSS)

#6

Post by zzo38computer » Wed, May 20, 2020, 1:52 AM UTC

goblin89 wrote: post #4

Pure CSS box shadows without extra markup can be achieved with using negative spread (with increased blur to compensate) and multiple shadows. I believe it allows to achieve the exact look the author demonstrates at the end. What I'd like to see is browser engines converge on identical box shadow rendering. Currently shadows tend to be more pronounced in Firefox relative to WebKit.

What I would prefer to see is user settings for box shadow rendering, so that the user can configure how much pronounced it is or to disable it entirely, with presets for imitating Firefox and for imitating WebKit.

Re: Better Box Shadows (CSS)

#7

Post by gkoberger » Wed, May 20, 2020, 2:01 AM UTC

A few people have mentioned that it seems the author didn't realize this is already the 4th parameter in `box-shadow`, so I made a quick demo:

https://codepen.io/gkoberger/pen/rNOommB

Re: Better Box Shadows (CSS)

#8

Post by Tagbert » Wed, May 20, 2020, 3:27 AM UTC

zzo38computer wrote: post #5

deefour wrote: post #3

Your website is gorgeous.

I disagree. It uses too large fonts, too large boxes, to narrow areas, etc.

With so many sites using tiny, gray fonts on light gray backgrounds, this is surprisingly readable.

Re: Better Box Shadows (CSS)

#9

Post by ehayes » Wed, May 20, 2020, 3:32 AM UTC

Layered shadow builder (without blur filter) https://brumm.af/shadows

Re: Better Box Shadows (CSS)

#10

Post by mistercow » Wed, May 20, 2020, 3:36 AM UTC

Maybe I'm missing some detail, but the blur filter seems pointless. Both box-shadow and blur() are approximations of gaussian blurs.

If you apply two gaussian blurs, you're multiplying two gaussian functions in the frequency domain. The product of two gaussian functions is another gaussian function, so the same effect can be accomplished more efficiently with a single gaussian blur. You just need to tweak the shadow opacity and blur radius.