HNHacker News
TopNewBestAskShowJobs

jvidjejnsjcj

8 karma · joined September 15, 2021

submissionscomments
jvidjejnsjcj··on Designing Beautiful Shadows in CSS
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.

jvidjejnsjcj··on Designing Beautiful Shadows in CSS
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 the same angle certainly does not approximate raytracing and give a more physically accurate result. In fact the lighting setup you would need to achieve that effect in real life would be very awkward, a set collinear lights of increasing size. Also, black is close to the best color to blend with for shadows, because it will lower the intensity of each color channel in roughly the same proportion. It won't give exact results unless you blend in sRGB space, but neither will any color blend, and black is probably the best approximation.

And two of his demos are very misleading. The majority of the 3D effect in the reveal demo comes from the actual 3D effect. Before sliding the slider, I couldn't judge the depths at all. And the elevation demo looks good, but I think much of the effect is from the size of the div increasing. If the purpose of the demo is to show the effect of shadow sharpness on perceived depth, it shouldn't confound it with another variable.