[HN Gopher] Designing Beautiful Shadows in CSS
___________________________________________________________________
Designing Beautiful Shadows in CSS
Author : nomdep
Score : 370 points
Date : 2021-09-15 00:26 UTC (22 hours ago)
(HTM) web link (www.joshwcomeau.com)
(TXT) w3m dump (www.joshwcomeau.com)
| tambourine_man wrote:
| 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.
| keb_ wrote:
| 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?
| johnthuss wrote:
| This is a fantastic article! What a great resource for learning
| how to implement realistic and great-looking shadows in CSS.
| albertgoeswoof wrote:
| > 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
| andrewingram wrote:
| 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...
| karaterobot wrote:
| That's all I could think about while reading this!
| pacifika wrote:
| Zero business value, slowing down mobile browsers. Great article
| and love the effect, though. The newsletter signup effect is
| worth a subscribe.
| travisd wrote:
| There's certainly value in, at the very least, understanding
| how shadows can help delineate elements and create depth (which
| is a huge part of how we as humans create visual hierarchy to
| determine what's important).
|
| Much of the article might not be exactly "business value
| focused" but neither are the technical deep dives of database
| systems, though you'd never hear this kind of comment on that
| kind of post.
|
| tl;dr: it's someone nerding out a bit, it doesn't need to
| create "business value"
| blowski wrote:
| 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.
| croes wrote:
| 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.
| blowski wrote:
| 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.
| wruza wrote:
| https://apple.com
|
| https://gucci.com
|
| https://perigold.com
|
| https://bugatti.com
|
| That's how. I guess it's time to tell these guys what they
| were missing all these years.
| tkzed49 wrote:
| the Apple website uses background blur and has giant
| scroll-animated images. The store page has drop shadows and
| CSS transitions.
| wruza wrote:
| We weren't talking about "just shadows" though. While one
| of the sub-pages of one of four brands is really using
| shadows at least somewhere: /*
| https://www.apple.com/store */ .rf-ccard-content {
| box-shadow: 2px 4px 12px rgb(0 0 0 / 8%); }
|
| ... it just supports the point made at the root comment.
|
| PS. And gucci not having an https certificate is another
| example how "premium brands" often have completely
| unusable or simply non-functioning sites. Still sells.
| blowski wrote:
| 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.
| wruza wrote:
| I disagree, please don't tangentially deny my data points
| as "no data". Four random vendors of "premium brand
| <something>" _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.
| blowski wrote:
| 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".
| bodge5000 wrote:
| Gucci was an established brand long before having a
| website. Unfortunatly, most people don't start their
| business at that level, so they need to do whatever they
| can to stand out (or at least look half decent)
| acomms wrote:
| Why can't depth be a design element that creates visual
| hierarchy for a better UX? Better UX can generate business
| value.
| [deleted]
| jagger27 wrote:
| It's posts like this that remind me why I force myself not to do
| front end. I always end up tweaking the same 10 lines of CSS
| until they're juuuuust right and never get anything done.
|
| Great article!
| herodoturtle wrote:
| I hear you - "pixel pushing" as it's called.
|
| It helps to think of it as an art.
|
| If you have the time to flesh it out, then enjoy the slow
| process.
|
| I find the work is more rewarding that way.
| dgb23 wrote:
| I call it "pushing pixels". It's incredibly time consuming, the
| devil is in the details.
| zxcvbn4038 wrote:
| I abandoned front end development long ago for the same reason
| - the endless rounds of people undoing each other's changes and
| moving things one pixel here, one pixel there, make the blue
| more blue, make the blue less blue, add more white space,
| remove more white space, etc. Maddening. I know the couch looks
| good everywhere if my wife has to move it, too bad we can't
| apply that same tactic to front end development.
| rambambram wrote:
| If it's "juuust right", I think you got something done. Don't
| be too harsh on yourself. ;)
| duxup wrote:
| I do front and back end work, I have a conversation like this a
| lot of folks:
|
| Rando Dev: "OMG CSS!"
|
| Me: "Bro if you just want to get the job done there's no shame
| in picking a CSS framework and getting it out the door. It will
| look nice and you're good to go."
|
| Rando Dev: "Yeah but then I wanted to tweak this and then I had
| to tweak this other thing and ..."
|
| Me: "Whose fault is that now?"
|
| You really don't need to get into the nitty gritty to do just
| fine in CSS land.
|
| The amount of give and take and work that goes into a good CSS
| framework is shockingly high / it's great that it is done for
| you. Be aware of that work if you decide to get into the
| details....
| bayindirh wrote:
| 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?
| brijeshpatel007 wrote:
| Thanks for sharing its help me in my work.
| makach wrote:
| That was a really nice blogpost. It never occured to me that I
| could apply multiple shadows to an element.
| travisd wrote:
| I highly recommend the "Refactoring UI" book. It's full of very
| actionable principles and tips like this that you can start using
| tomorrow to make less ugly things. It includes things like:
| shadows, HSL for colors instead of RGB, how to strategically
| (de)emphasize text, etc. It won't make you a designer, but it
| will make your personal projects less ugly and help you survive
| the gaps between consulting with a real designer.
| jungleanimal wrote:
| Wow.. Josh did quite a lot here I never expected this. I've never
| been able to make something like that and simulate ray tracing...
| wow just wow
| jvidjejnsjcj wrote:
| 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.
| spyhi wrote:
| 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/
| jvidjejnsjcj wrote:
| 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.
| spyhi wrote:
| 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.
| benjaminjackman wrote:
| This is a really good article and the examples are very pretty. I
| especially enjoyed the part about how filter:drop-shadow contours
| to the shape of the element (did not know that, and that's a
| handy trick).
|
| However just beware that there can be a decent performance hit
| from having a lot of box-shadows.
| sscarduzio wrote:
| The more I read, the more I think ALL of this should be taken
| care by a library/framework/toolkit
| jacknews wrote:
| "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?
| klodolph wrote:
| It's not totally flat. Flat where appropriate. Documents
| _should_ be flat. Shadows are for things that appear on top of
| other things. There's a message on the left that says, "Hi
| there! Can I share a cool thing I'm working on with you?" This
| has a shadow, because it appears on top of the document.
| philote wrote:
| The "Posts" nav item has a dropdown that overlays the
| document and is still completely flat.
| dsQTbR7Y5mRHnZv wrote:
| There is a drop shadow on the posts nav item:
| https://i.imgur.com/dY408DK.png
| rtsil wrote:
| The dropdown has a shadow for me with Chrome (and also a
| sound effect).
| bla3 wrote:
| "The shoemaker's children always go barefoot" as they say.
| louissm_it wrote:
| This post must have taken a ton of time to build, and it's
| extremely well done. The author has a really nice CSS course
| about to launch if anyone is interested.
|
| https://css-for-js.dev
| [deleted]
| skavi wrote:
| I wonder if there will ever be a way to plug web elements into
| "unified lighting environments" as in Fuchsia's Scenic [0].
|
| [0]: https://fuchsia.dev/fuchsia-
| src/concepts/graphics/scenic/sce...
| [deleted]
| steve_adams_86 wrote:
| Wow, this is way beyond what I expected. Josh consistently
| illustrates and explains these concepts extremely well. I really
| enjoy it.
|
| I hadn't considered the idea of colour matching to simulate
| raytracing. It looks great, but I'm not sure when I'd have a
| product to work on which would be complimented by this treatment.
| Maybe I work on boring stuff. Perhaps if it was done with enough
| subtlety I could get away with it.
|
| I also wonder if it could become troublesome if you had nested
| ColourWrapper components. I suppose the most recent wrapper would
| take precedence, or it could be designed as such. Maybe I'll give
| it a shot.
| chrismorgan wrote:
| > _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 already well
| underway and had demonstrated that something like will-change
| wasn't necessary, though it was still a few more years before it
| was stabilised in Firefox.)
| kevingadd wrote:
| 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.
| bajsejohannes wrote:
| The "optimized shadow" version has a lot of subtle banding
| artifacts, presumably because of the layers. If I squint, the
| optimized looks better, though.
| daneel_w wrote:
| It certainly looks very nice compared to a single basic box
| shadow. Though, 6 stacked boxes is also a reason why otherwise
| innocuous webpages are annoyingly jerky when scrolling through
| them.
| jansan wrote:
| _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 45deg
| lighting angle, but more recently (MacOS, Material Design) the
| more common case is the light source shining from the top.
| user-the-name wrote:
| 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.
| robbedpeter wrote:
| Craft is beautiful. Thanks for this link!
| leephillips wrote:
| 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.
| prions wrote:
| (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.
| beardyw wrote:
| 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).
___________________________________________________________________
(page generated 2021-09-15 23:03 UTC)