In Reward of Shadows | CSS-Methods

July 12, 2022

1

Our pricey buddy Robin has a brand new essay referred to as In Reward of Shadows. Now, earlier than you jump over there in search of nuggets on CSS field shadows, textual content shadows, and shadow filters… that is not that. It’s an essay on pictures and what Robin has discovered about handing shadows with a digital camera.

So, why share this? As a result of it’s cool as heck that he made an article directed web page devoted to at least one essay. And also you’ll study rather a lot about CSS when you crack open DevTools on it:

Centering methods. Discover how CSS Grid is used on the <physique> merely to heart the pamphlet. Then Robin reaches for it once more on every .body of the essay to do the identical factor with the content material.
“Fake” background photographs. Robin may have made plenty of work for himself by making a CSS class for every .body to get the background photographs. As an alternative, he makes use of object-fit: cowl on inlined HTML <img>s to keep up the side ratio whereas filling the .body container. (He’s truly written about this earlier than.) That certain saves plenty of CSS’ing, however it additionally permits him to make use of alt textual content if wanted. I sorta surprise if a <determine>/<figcaption> construction may’ve labored right here as an alternative however I doubt it might present a lot further profit for what’s occurring.
Stacking contexts. One other perk of these fake background photographs? They use absolute positioning which creates a stacking context, permitting Robin to set a z-index: 0 on the photographs. That means, the textual content stacks instantly on prime with z-index: 1. Once more, CSS Grid is dealing with all of the centering so issues are properly aligned.
Scroll snapping. I at all times love it after I see CSS scroll snapping within the wild. Robin made a pleasant alternative to make use of it right here, because it actually lends to the entire page-turning expertise whereas scrolling via frames. Horizontal scrolling could be maddening, but in addition extraordinarily elegant when executed nicely as it’s right here in the way it enhances the narrow-column design. If you would like a pleasant rationalization of the way it all works, Robin has additionally written about horizontal scroll snapping.