Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Designing Beautiful Shadows in CSS

joshwcomeau.com

Post reply on HN
Print view View original

31–40 of 67 posts

Re: Designing Beautiful Shadows in CSS

#31

Post by blowski »

wruza wrote: post #29
blowski wrote: post #25

Earlier quoted context omitted.

Their 1998 website probably used tables with celllpadding, and it was “good enough” at the time. But I suspect they’ve benefitted by changing it. However, since neither of us have data, it’s all subjective. For those that do have data, they’ve decided spending millions on it is worth it.

I disagree, please don’t tangentially deny my data points as “no data”. Four random vendors of “premium brand ” not doing today what was spoken about in this thread (properly casting shadows as described in tfa has zero business value for premium brands) is not no-data.

OK good point, instead of "no data" I'll say "an insignificantly small amount of data from which it's impossible to draw any conclusions as you could use the same data to say pretty much anything".

Re: Designing Beautiful Shadows in CSS

#32

Post by bla3 »

jacknews wrote: post #26

"In my humble opinion, the best websites and web applications have a tangible “real” quality to them. There are lots of factors involved to achieve this quality, but shadows are a critical ingredient." Yet his own site style is totally flat?

"The shoemaker's children always go barefoot" as they say.

Re: Designing Beautiful Shadows in CSS

#33

Post by bayindirh »

From the article:

"Layered shadows are undeniably beautiful, but they do come with a cost. If we layer 5 shadows, our device has to do 5x more work!

This isn't as much of an issue on modern hardware, but it can slow rendering down on older inexpensive mobile devices."

5x more work is always 5x more work. Can we just stop downplaying it?

Re: Designing Beautiful Shadows in CSS

#36

Post by kevingadd »

chrismorgan wrote: post #7

> One more quick tip: unlike box-shadow, the filter property is hardware-accelerated in Chrome, and possibly other browsers. In Firefox, everything is hardware-accelerated. And the `will-change` property is largely obsolete. (I personally wish they had stuck to the old translateZ(0) hack which was obviously a hack rather than defining will-change, since WebRender—what lets Firefox do all the rendering on the GPU—was…

While I generally agree, even in a hardware accelerated world will-change can still be useful. If you're transforming a complex box with lots of typeset international text and stuff in it, it can be necessary to buffer that whole box to a scratch surface first, so will-change is useful to optimize that.

Re: Designing Beautiful Shadows in CSS

#38

Post by toastercat »

tambourine_man wrote: post #35

I get a white page with unexpected error on desktop Safari. TypeError: null is not an object (evaluating 'e.current.getBoundingClientRect') Gotta love React, TypeScript and all this wonderful modern frontend stack. So resilient.

This is something I've wondered -- can someone smarter than me explain the benefit of using something like Next.js or Gatsby for a blogsite like this over an SSG like Jekyll or Zola? Doesn't Next & Gatsby deliver a bunch of JS to the client either way?

Re: Designing Beautiful Shadows in CSS

#39

Post by andrewingram »

albertgoeswoof wrote: post #37

> If CSS had a real lighting system, we would specify a position for one or more lights. Sadly, CSS has no such thing. Are there any post processing libraries that can add this? It would be super interesting to treat elements on the page in 3 dimensions

That's a good point. Could largely be achieved using a combination of design tokens to indicate light source, and an abstraction that allows assigning an elevation value (much like in Material Design) to individual elements.

Arguably what's missing is the ability to use blend modes with shadows, so that you don't need to explicitly know anything about the elements that the shadows are rendered on.

Edit: Found a Stackoverflow answer that shows a way to somewhat emulate this using a pseudo element: https://stackoverflow.com/questions/52838406/apply-blend-mod...

Re: Designing Beautiful Shadows in CSS

#40

Post by user-the-name »

jansan wrote: post #23

It's common for that light source to be above and slightly to the left Is this still the case? Windows used to have an almost 45° lighting angle, but more recently (MacOS, Material Design) the more common case is the light source shining from the top.

Yes, largely, the top-left light position is quite outdated, and modern designs are a lot more likely to have the light directly above.

Top-left was used in the past because the only lighting hints was the edge colours, and this looks weird with a light that is directly above, so typically a 45-degree light was assumed.

In modern design, there is very little edge colouring used, and instead the light determines only shadow positioning. And shadows look perfectly fine with a light positioned directly above. This placement feels a bit more natural, as it doesn't introduce an arbitrary sideways bias.

Post reply on HN