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

51–60 of 67 posts

Re: Designing Beautiful Shadows in CSS

#51

Post by croes »

blowski wrote: post #14
pacifika wrote: post #11

Zero business value, slowing down mobile browsers. Great article and love the effect, though. The newsletter signup effect is worth a subscribe.

How can you say for certain there’s no business impact? I can imagine for really premium brands, this kind of attention to detail makes a difference.

Difference for whom? I bet most users won't see a difference even if you ask them to search for it.

And most website lack more important features than shadows even premium brands. Sometimes premium brands in particular value looks over function.

Re: Designing Beautiful Shadows in CSS

#52

Post by karaterobot »

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 all I could think about while reading this!

Re: Designing Beautiful Shadows in CSS

#53

Post by leephillips »

I think the most important tip here is not to use neutral gray shadows. I’m no artist, but I’ve heard that an early lesson for all painters is never to use neutral grey shadows. They need not match the hue of the object they’re falling on, I don’t think; a blue tint is sometimes recommended.

Re: Designing Beautiful Shadows in CSS

#54

Post by prions »

leephillips wrote: post #53

I think the most important tip here is not to use neutral gray shadows. I’m no artist, but I’ve heard that an early lesson for all painters is never to use neutral grey shadows. They need not match the hue of the object they’re falling on, I don’t think; a blue tint is sometimes recommended.

(amateur painter) Generally, shadows have a lower chroma and value than the color of the object.

If I'm painting a purple sphere, then the cast shadow will be a much darker value of purple.

Re: Designing Beautiful Shadows in CSS

#55

Post by blowski »

croes wrote: post #51
blowski wrote: post #14

Earlier quoted context omitted.

How can you say for certain there’s no business impact? I can imagine for really premium brands, this kind of attention to detail makes a difference.

Difference for whom? I bet most users won't see a difference even if you ask them to search for it. And most website lack more important features than shadows even premium brands. Sometimes premium brands in particular value looks over function.

On the other hand, a lot of developers undervalue design.

Having sat through quite a lot of end-user sessions, I would make three points:

1. users do often notice these differences subconsciously, even if they say they don’t. Say “which do you prefer” and they’ll tell you the one with the nicer shadow (for example) even if they can’t articulate why.

2. When a site is more aesthetically pleasing, users report greater satisfaction with the product and find it more usable. Of course, there’s diminishing returns here, but premium brands may get more returns on these subtle extras.

3. Developers tend to prefer sparse, lo-fi designs more than non-developers.

Re: Designing Beautiful Shadows in CSS

#56

Post by beardyw »

leephillips wrote: post #53

I think the most important tip here is not to use neutral gray shadows. I’m no artist, but I’ve heard that an early lesson for all painters is never to use neutral grey shadows. They need not match the hue of the object they’re falling on, I don’t think; a blue tint is sometimes recommended.

Thinking about the effects of subtractive colours with paints never maps successfully onto additive colours we have on screen. In fact the way in which say blue and yellow make a form of green by subtraction is fascinating and explains why you can never mix a really bright colour. There is no equivalent on screen as far as I know.

I was taught to put my black paint away and never ever use it! You really don't need it (unless you want to paint something that is actually black).

Re: Designing Beautiful Shadows in CSS

#57

Post by spyhi »

jvidjejnsjcj wrote: post #50

To my eyes the best looking shadows on the page are the harder box-shadows, like the one labeled typical shadow at the beginning of the article. In particular the very soft shadows look indistinct and displeasing. It might be because using a single, somewhat hard, black colored box-shadow is the most physically realistic option presented for a single distant light source . Adding more shadows of different radii at th…

I am surprised to find this comment so high up when so much of it is so categorically wrong I almost wonder if you're saying opposite things as a joke.

Perhaps the most egregious is your position on black shadows being the best and physically most realistic color to blend with, when in reality pure black doesn't exist in nature almost at all, it's just how our brains process things and if you actually use pure black then things will look subtly wrong--I know because I used to do that and learning to stay away from black where possible after taking a basic design course was one of the things that best improved the feel of my designs. Like, there's decades of research in the arts, sciences, and design community about this! It works for a reason.

For the sake of brevity, I'll leave this blog post here that explains it better and more in depth: https://ianstormtaylor.com/design-tip-never-use-black/

Re: Designing Beautiful Shadows in CSS

#58

Post by jvidjejnsjcj »

spyhi wrote: post #57
jvidjejnsjcj wrote: post #50

To my eyes the best looking shadows on the page are the harder box-shadows, like the one labeled typical shadow at the beginning of the article. In particular the very soft shadows look indistinct and displeasing. It might be because using a single, somewhat hard, black colored box-shadow is the most physically realistic option presented for a single distant light source . Adding more shadows of different radii at th…

I am surprised to find this comment so high up when so much of it is so categorically wrong I almost wonder if you're saying opposite things as a joke. Perhaps the most egregious is your position on black shadows being the best and physically most realistic color to blend with, when in reality pure black doesn't exist in nature almost at all, it's just how our brains process things and if you actually use pure black…

There're two claims of fact (as opposed to just my opinion) in my comment: That layering multiple increasingly sized box-shadows in a line isn't more physically accurate than a single box-shadow, and that black is the most physically accurate color to blend with.

I'm quite confident of the first claim. You're contest of my second claim makes me think I was unclear. I don't suggest using black at 100% opacity as a shadow color. Instead, The shadow should be black with some fractional opacity, so that the background color is blended with black. The result of blending with black will not be pure black, but instead a good approximation of less intense light of the same color.

I also recognize that it's true that designers often use more saturated colors as the colors get darker, to good effect. But in the case of the shadows presented in the FA, I don't think it looks good, and whether it looks good or not, to claim it's inspired by physical realism is wrong.

Re: Designing Beautiful Shadows in CSS

#59

Post by spyhi »

jvidjejnsjcj wrote: post #58
spyhi wrote: post #57

Earlier quoted context omitted.

I am surprised to find this comment so high up when so much of it is so categorically wrong I almost wonder if you're saying opposite things as a joke. Perhaps the most egregious is your position on black shadows being the best and physically most realistic color to blend with, when in reality pure black doesn't exist in nature almost at all, it's just how our brains process things and if you actually use pure black…

There're two claims of fact (as opposed to just my opinion) in my comment: That layering multiple increasingly sized box-shadows in a line isn't more physically accurate than a single box-shadow, and that black is the most physically accurate color to blend with. I'm quite confident of the first claim. You're contest of my second claim makes me think I was unclear. I don't suggest using black at 100% opacity as a sha…

Fractional opacity mixing with pure black is still not the most physically accurate shadow, because in the real world ambient light is mixed in with shadow, and also the color of the object casting shadow (and the surface the shadow is cast on) also creates color casts on a second light bounce from off-angle ambient light hitting an object, which influences shadow color in a way that's not "black on top of surface color." The algorithm for blending drop shadows doesn't take these things into account. https://willkempartschool.com/the-secret-to-painting-realist...

The link above also has an example of the use of multiple shadows to create a more naturalistic feel, namely that in the real world we are accustomed to, one source of light creates multiple kinds of shadows because of reflections from clouds, objects, etc.

This is all linked to physical realism, to help carry over our expectations of what the world looks like into a (in this case) digital space.

Re: Designing Beautiful Shadows in CSS

#60

Post by systoll »

user-the-name wrote: post #40
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…

You do see top-left lighting in 'neomorphic' designs nowadays.

The use of bevels has similar attributes to the edge-highlights of win 95, where putting the light from the top can make the left/right edges indistinct.

Post reply on HN