Designing Beautiful Shadows in CSS
joshwcomeau.com
Designing Beautiful Shadows in CSS
1–10 of 67 posts
Re: Designing Beautiful Shadows in CSS
#2This is a fantastic article! What a great resource for learning how to implement realistic and great-looking shadows in CSS.
Re: Designing Beautiful Shadows in CSS
#3Craft is beautiful. Thanks for this link!
Re: Designing Beautiful Shadows in CSS
#4It'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!
Re: Designing Beautiful Shadows in CSS
#5Wow, 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.
Re: Designing Beautiful Shadows in CSS
#6This 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.
Re: Designing Beautiful Shadows in CSS
#7> 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.)
Re: Designing Beautiful Shadows in CSS
#8Thanks for sharing its help me in my work.
Re: Designing Beautiful Shadows in CSS
#9I 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...
Re: Designing Beautiful Shadows in CSS
#10It'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 call it “pushing pixels”. It’s incredibly time consuming, the devil is in the details.