Get the top HN stories in your inbox every day.
chrismorgan
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.
chrismorgan
But does will-change do that? I would think what you describe would be a pessimisation in many (perhaps most) cases.
(I haven’t the foggiest idea and my guess is wild rather than educated. I would like to be informed.)
kevingadd
It's a hint, so it has no (afaik) spec-required behavior. Whether it does that is up to the browser vendor and could depend on your device configuration.
The MDN guidance says not to use it unless absolutely necessary, which I agree with - but it was added to solve a real problem on certain browser engines (and the problem can be way worse on mobile.)
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.
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!
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....
dgb23
I call it “pushing pixels”. It’s incredibly time consuming, the devil is in the details.
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.
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.
rambambram
If it's "juuust right", I think you got something done. Don't be too harsh on yourself. ;)
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.
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?
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.
philote
The "Posts" nav item has a dropdown that overlays the document and is still completely flat.
dsQTbR7Y5mRHnZv
There is a drop shadow on the posts nav item: https://i.imgur.com/dY408DK.png
rtsil
The dropdown has a shadow for me with Chrome (and also a sound effect).
bla3
"The shoemaker's children always go barefoot" as they say.
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.
jansan
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 45° lighting angle, but more recently (MacOS, Material Design) the more common case is the light source shining from the top.
user-the-name
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.
systoll
You do see top-left lighting in 'neomorphic' designs nowadays.
The use of bevels has similar attributes to the edge-highlights of win 95, where putting the light from the top can make the left/right edges indistinct.
user-the-name
Does anyone other than design showcase websites use "neumorphic" designs? I have not seen any serious app use it, and it is ugly as hell.
benjaminjackman
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.
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
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...
kylebyproxy
I threw together a crude implementation of a pure CSS lighting system if you're interested: https://github.com/kinseywk/zShadows/blob/gh-pages/index.md
karaterobot
That's all I could think about while reading this!
daneel_w
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.
bajsejohannes
The "optimized shadow" version has a lot of subtle banding artifacts, presumably because of the layers. If I squint, the optimized looks better, though.
pvillano
"Physically Based Rendering in CSS" sounds kind of silly, but here we go
First, the width of the blurred region (penumbra). Imagine putting a camera on the ground and pointing it at the sun. By moving the camera in and out of shadow, it can see more or less of the sun. Intuitively we know that the higher the box is, the bigger the penumbra. The sun has an apparent size of .53°, and so does the region of partial shadow descending from the edge of the box. Some trigonometry later, and The ratio of the width of the penumbra to the elevation of the box is .00925 or about 1%
Next, we can calculate what portion of the sun is visible from the penumbra. The amount of sun visible is a portion of a circle, so we do an integral of a circle function and hoo boy would that be a pain to type on mobile. The graph is sort of a `smoothstep` shape, but is very close to linear
Get the top HN stories in your inbox every day.
> 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.)