The more I read, the more I think ALL of this should be taken care by a library/framework/toolkit
Designing Beautiful Shadows in CSS
21–30 of 67 posts
Re: Designing Beautiful Shadows in CSS
#22Earlier quoted context omitted.
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 simp…
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)
Re: Designing Beautiful Shadows in CSS
#23It'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.
Re: Designing Beautiful Shadows in CSS
#24It'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!
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.
Re: Designing Beautiful Shadows in CSS
#25Earlier quoted context omitted.
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 simp…
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.
Re: Designing Beautiful Shadows in CSS
#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?
Re: Designing Beautiful Shadows in CSS
#27It'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!
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.
Re: Designing Beautiful Shadows in CSS
#28That was a really nice blogpost. It never occured to me that I could apply multiple shadows to an element.
Re: Designing Beautiful Shadows in CSS
#29Earlier quoted context omitted.
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 simp…
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.
Re: Designing Beautiful Shadows in CSS
#30The "optimized shadow" version has a lot of subtle banding artifacts, presumably because of the layers. If I squint, the optimized looks better, though.