In Praise Of Shadows

Taasavaldanud Platon

järgijaid: 0

Meie kallil sõbral Robinil on uus essee nimega Varjude ülistuses. Nüüd, enne kui hüppate sinna CSS-i kastide varjude, tekstivarjude ja varjufiltrite tükid otsima... see on mitte, et. See on essee fotograafiast ja sellest, mida Robin on õppinud kaameraga varjude üleandmisest.

Miks siis seda jagada? Sest on jube lahe, et ta tegi ühele esseele pühendatud artiklile suunatud lehe. Ja CSS-i kohta saate palju teada, kui avate sellel DevTools:

Tsentreerimise tehnikad. Pange tähele, kuidas CSS-võrku kasutatakse <body> lihtsalt selleks brošüür keskele. Siis sirutab Robin iga kord selle järele .frame esseest, et teha sama sisuga.
"Faux" taustapildid. Robin oleks võinud enda jaoks palju tööd teha, luues igaühe jaoks CSS-klassi .frame taustapiltide saamiseks. Selle asemel kasutab ta object-fit: cover sisseehitatud HTML-is <img>s säilitada kuvasuhe täitmise ajal .frame konteiner. (Ta on tegelikult selle kohta kirjutatud enne.) See säästab kindlasti palju CSS-i, kuid võimaldab tal vajadusel kasutada ka alternatiivteksti. Huvitav, kas a <figure>/<figcaption> struktuur oleks võinud siin selle asemel töötada, kuid ma kahtlen, et see annaks toimuvale palju lisakasu.
Kontekstide virnastamine. Veel üks nende võlts-taustapiltide eelis? Nad kasutavad absoluutset positsioneerimist, mis loob virnastamise konteksti, võimaldades Robinil määrata a z-index: 0 piltide peal. Nii virnab tekst otse peal z-index: 1. Jällegi, CSS Grid tegeleb kogu tsentreerimisega, nii et asjad on kenasti joondatud.
Kerimise klõpsamine. ma alati armastus seda, kui näen vabas looduses CSS-i kerimist. Robin tegi selle siin kasutamiseks kena valiku, kuna see annab tõesti kogu kaadrite kerimise lehekülje keeramise kogemuse. Horisontaalne kerimine võib olla hullumeelne, aga ka äärmiselt elegantne, kui see on hästi teostatud, kuna see täiustab siin kitsa veeru disaini. Kui soovite selle kõige toimimise kohta kena selgitust, on seda ka Robinil kirjutatud horisontaalse kerimise kohta.