Our dear friend Robin has a new essay called In Praise of Shadows. Now, before you hop over there looking for nuggets on CSS box shadows, text shadows, and shadow filters… this is not that. It’s an essay on photography and what Robin has learned about handing shadows with a camera.
So, why share this? Because it’s cool as heck that he made an article directed page dedicated to one essay. And you’ll learn a lot about CSS if you crack open DevTools on it:
<body>
simply to center the pamphlet. Then Robin reaches for it again on each .frame
of the essay to do the same thing with the content..frame
to get the background images. Instead, he uses object-fit: cover
on inlined HTML <img>
s to maintain the aspect ratio while filling the .frame
container. (He’s actually written about this before.) That sure saves a lot of CSS’ing, but it also allows him to use alt text if needed. I sorta wonder if a <figure>
/<figcaption>
structure could’ve worked here instead but I doubt it would provide much additional benefit for what’s going on.z-index: 0
on the images. That way, the text stacks directly on top with z-index: 1
. Again, CSS Grid is handling all the centering so things are nicely aligned.If nothing else, Robin is an excellent writer and it’s worth reading anything he publishes, CSS and beyond.
To Shared Link — Permalink on CSS-Tricks
In Praise of Shadows originally published on CSS-Tricks. You should get the newsletter.
Having fun with Bramus’ new Caniuse CLI tool. This’ll save lots of trips to the…
Two possible syntaxes for CSS masonry, one draft specification, and you get to share your…
Getting right to it: the CSS-Tricks Almanac got a big refresh this week! I’m guessing…
I’m working on a refresh of my personal website, what I’m calling the HD remaster.…
Only Chris, right? You’ll want to view this in a Chromium browser: CodePen Embed Fallback…
I’m a big Lynn Fisher fan. You probably are, too, if you’re reading this. Or…