Live data from Hacker News

Designing Beautiful Shadows in CSS

joshwcomeau.com

11–20 of 67 posts

Re: Designing Beautiful Shadows in CSS

#13
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.

Re: Designing Beautiful Shadows in CSS

#14

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.

Re: Designing Beautiful Shadows in CSS

#16
post #14

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.

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.

Re: Designing Beautiful Shadows in CSS

#17

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

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”

Re: Designing Beautiful Shadows in CSS

#18
post #16
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.

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.

the Apple website uses background blur and has giant scroll-animated images. The store page has drop shadows and CSS transitions.

Re: Designing Beautiful Shadows in CSS

#19
post #18
post #16

Earlier quoted context omitted.

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.

the Apple website uses background blur and has giant scroll-animated images. The store page has drop shadows and CSS transitions.

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.

Re: Designing Beautiful Shadows in CSS

#20
post #4

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!

If it's "juuust right", I think you got something done. Don't be too harsh on yourself. ;)
Post reply on HN