Shadows, CSS, and the Art of the Photo Essay
Robin Rendle’s latest essay, In Praise of Shadows, isn’t about box-shadow or text-shadow. It’s a piece on photography, specifically how Robin handles shadows with a camera. For front-end folks, though, the real story is in the page itself. It’s a dedicated, highly-polished article page, and cracking open DevTools reveals a handful of CSS techniques worth stealing.
Grid for Everything Centering
The first thing you’ll notice is the layout’s rock-solid stability. Robin leans on CSS Grid twice: once on the <body> to center the entire pamphlet, and again on each .frame to center its content within the scrolling area. It’s a clean, systematic approach to centering that avoids the usual margin and positioning hacks.
Faux Backgrounds: img Overlaid
Instead of creating a custom CSS class for every .frame’s background image—which would balloon the stylesheet—Robin uses inline <img> tags with object-fit: cover. This keeps the aspect ratio intact while the image fills its container. It cuts down on CSS significantly, and bonus: since they’re real <img> elements, they support alt text when needed. A <figure>/<figcaption> wrapper might have been an alternative, but it’s hard to see the added semantic value here.
Stacking for Text on Top
The faux-image technique has a side benefit: absolutely-positioned images create their own stacking context. Robin sets the <img>s to z-index: 0, then lifts the accompanying text with z-index: 1. Combined with Grid’s centering, the two layers line up perfectly without fighting over flow or spacing.
Scroll Snapping as Page Turn
Perhaps the most satisfying detail is the use of CSS scroll snapping. Each .frame acts like a page, and the snap behavior makes it feel like you’re turning leaves through a narrow-columned photo book. Horizontal scrolling usually gets a bad rap—rightly so—but here it feels purposeful. When it’s executed this well, it proves that scroll snapping is much more than a carousel trick.
Robin’s essay is worth your time. The CSS behind it is just as compelling as the prose it supports.
