Our pricey pal Robin has a brand new essay known as In Reward of Shadows. Now, earlier than you jump over there on the lookout for nuggets on CSS field shadows, textual content shadows, and shadow filters… that is not that. It’s an essay on images 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 be taught quite a bit 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 photos. Robin may have made a whole lot of work for himself by making a CSS class for every .body to get the background photos. As a substitute, he makes use of object-fit: cowl on inlined HTML <img>s to take care of the facet ratio whereas filling the .body container. (He’s truly written about this earlier than.) That certain saves a whole lot of CSS’ing, but it surely 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 a substitute however I doubt it might present a lot extra profit for what’s occurring.Stacking contexts. One other perk of these fake background photos? They use absolute positioning which creates a stacking context, permitting Robin to set a z-index: 0 on the photographs. That method, 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 all the time 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 by way of frames. Horizontal scrolling will be maddening, but additionally extraordinarily elegant when executed effectively as it’s right here in the way it enhances the narrow-column design. If you’d like a pleasant rationalization of the way it all works, Robin has additionally written about horizontal scroll snapping.
If nothing else, Robin is a wonderful author and it’s value studying something he publishes, CSS and past.
To Shared Hyperlink — Permalink on CSS-Methods
In Reward of Shadows initially printed on CSS-Methods. It is best to get the publication.
Subscribe to MarketingSolution.
Receive web development discounts & web design tutorials.
Now! Lets GROW Together!