In Praise Of Shadows

Publisert av Platon

Følgere: 0

Vår kjære venn Robin har et nytt essay kalt I lovprisning av skygger. Nå, før du hopper dit og leter etter nuggets på CSS-boksskygger, tekstskygger og skyggefiltre ... dette er ikke det. Det er et essay om fotografering og hva Robin har lært om å levere skygger med et kamera.

Så hvorfor dele dette? Fordi det er kult at han laget en artikkelrettet side dedikert til ett essay. Og du vil lære mye om CSS hvis du åpner DevTools på den:

Sentreringsteknikker. Legg merke til hvordan CSS Grid brukes på <body> rett og slett til sentrere heftet. Så strekker Robin seg etter det igjen på hver .frame av essayet for å gjøre det samme med innholdet.
"Faux" bakgrunnsbilder. Robin kunne ha gjort mye arbeid for seg selv ved å lage en CSS-klasse for hver .frame for å få bakgrunnsbildene. I stedet bruker han object-fit: cover på innebygd HTML <img>s for å opprettholde sideforholdet mens du fyller .frame container. (Det er han faktisk skrevet om dette før.) Det sparer sikkert mye CSS'ing, men det lar ham også bruke alt-tekst om nødvendig. Jeg lurer litt på om a <figure>/<figcaption> struktur kunne ha fungert her i stedet, men jeg tviler på at det ville gi mye ekstra fordel for det som skjer.
Stable sammenhenger. En annen fordel med de falske bakgrunnsbildene? De bruker absolutt posisjonering som skaper en stablekontekst, slik at Robin kan sette en z-index: 0 på bildene. På den måten stables teksten rett på toppen med z-index: 1. Igjen, CSS Grid håndterer all sentrering slik at ting er pent justert.
Rull snapping. jeg alltid elsker det når jeg ser CSS-rulle knipse i naturen. Robin tok et godt valg å bruke det her, siden det virkelig gir deg en opplevelse av å snu siden mens du ruller gjennom rammer. Horisontal rulling kan være irriterende, men også ekstremt elegant når det utføres godt, da det er her i hvordan det forbedrer den smale søyledesignen. Hvis du vil ha en fin forklaring på hvordan det hele fungerer, har Robin også skrevet om horisontal scroll snapping.