I lovprisning af skygger

Genudgivet af Platon

Abonnenter: 0

Vores kære ven Robin har et nyt essay kaldet I Ros for Shadows. Nu, før du hopper derover og leder efter nuggets på CSS-boksskygger, tekstskygger og skyggefiltre... dette er ikke det. Det er et essay om fotografering og hvad Robin har lært om at aflevere skygger med et kamera.

Så hvorfor dele dette? Fordi det er fedt som pokker, at han lavede en artikelorienteret side dedikeret til ét essay. Og du vil lære meget om CSS, hvis du åbner DevTools på det:

Centreringsteknikker. Bemærk, hvordan CSS Grid bruges på <body> simpelthen at centrere pjecen. Så rækker Robin ud efter det igen på hver .frame af essayet for at gøre det samme med indholdet.
"Faux" baggrundsbilleder. Robin kunne have gjort en masse arbejde for sig selv ved at oprette en CSS-klasse for hver .frame for at få baggrundsbillederne. I stedet bruger han object-fit: cover på indlejret HTML <img>s for at bevare billedformatet, mens du udfylder .frame beholder. (Det er han faktisk skrevet om dette før.) Det sparer helt sikkert en masse CSS'ing, men det giver ham også mulighed for at bruge alt-tekst, hvis det er nødvendigt. Jeg spekulerer lidt på, om a <figure>/<figcaption> struktur kunne have fungeret her i stedet, men jeg tvivler på, at det ville give meget yderligere fordele for det, der foregår.
Stable sammenhænge. En anden fordel ved de falske baggrundsbilleder? De bruger absolut positionering, som skaber en stablingskontekst, så Robin kan indstille en z-index: 0 på billederne. På den måde stables teksten direkte ovenpå med z-index: 1. Igen håndterer CSS Grid al centreringen, så tingene er pænt justeret.
Scroll snapping. jeg gør altid kærlighed det når jeg ser CSS-rulle snapper i naturen. Robin tog et godt valg at bruge det her, da det virkelig giver mulighed for hele sidevendende oplevelse, mens han ruller gennem rammer. Vandret rulning kan være vanvittigt, men også ekstremt elegant, når det udføres godt, da det er her i, hvordan det fremhæver det smalle søjledesign. Hvis du vil have en god forklaring på, hvordan det hele fungerer, har Robin også skrevet om horisontal scroll snapping.