Hacker News

11 hours ago by chrismorgan

> 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.)

4 hours ago by kevingadd

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.

2 hours ago by louissm_it

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

12 hours ago by steve_adams_86

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.

2 hours ago by jvidjejnsjcj

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.

13 hours ago by jagger27

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!

3 hours ago by duxup

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

7 hours ago by zxcvbn4038

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.

10 hours ago by dgb23

I call it “pushing pixels”. It’s incredibly time consuming, the devil is in the details.

6 hours ago by herodoturtle

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.

7 hours ago by jacknews

"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?

3 hours ago by klodolph

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.

3 hours ago by philote

The "Posts" nav item has a dropdown that overlays the document and is still completely flat.

2 hours ago by dsQTbR7Y5mRHnZv

There is a drop shadow on the posts nav item: https://i.imgur.com/dY408DK.png

2 hours ago by rtsil

The dropdown has a shadow for me with Chrome (and also a sound effect).

5 hours ago by bla3

"The shoemaker's children always go barefoot" as they say.

9 hours ago by travisd

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.

4 hours ago by albertgoeswoof

> 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

4 hours ago by andrewingram

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

an hour ago by karaterobot

That's all I could think about while reading this!

Daily digest email

Get a daily email with the the top stories from Hacker News. No spam, unsubscribe at any time.