In Praise Of Shadows

Republicat de Platon

Urmaritori: 0

Dragul nostru prieten Robin are un nou eseu numit În Lauda umbrelor. Acum, înainte de a sări acolo, căutând pepite pe umbrele casetei CSS, umbrele textului și filtrele de umbră... acesta este nu aia. Este un eseu despre fotografie și despre ceea ce Robin a învățat despre înmânarea umbrelor cu o cameră.

Deci, de ce să distribui asta? Pentru că e grozav că a făcut o pagină de articol dedicată unui eseu. Și veți învăța multe despre CSS dacă deschideți DevTools pe el:

Tehnici de centrare. Observați cum este folosită Grila CSS pe <body> pur și simplu să centrați pamfletul. Apoi Robin se întinde din nou după el pe fiecare .frame al eseului să facă același lucru cu conținutul.
Imagini de fundal „false”. Robin ar fi putut lucra mult pentru el, creând o clasă CSS pentru fiecare .frame pentru a obține imaginile de fundal. În schimb, el folosește object-fit: cover pe HTML inline <img>s pentru a menține raportul de aspect în timp ce umpleți .frame recipient. (El este de fapt scris despre asta înainte.) Cu siguranță economisește o mulțime de CSS, dar îi permite și să folosească text alternativ dacă este necesar. Mă întreb dacă a <figure>/<figcaption> structura ar fi putut funcționa aici, dar mă îndoiesc că ar oferi un beneficiu suplimentar pentru ceea ce se întâmplă.
Stivuirea contextelor. Un alt avantaj al acelor imagini de fundal false? Ei folosesc poziționarea absolută care creează un context de stivuire, permițându-i lui Robin să seteze a z-index: 0 pe imagini. În acest fel, textul se stivuiește direct deasupra z-index: 1. Din nou, CSS Grid se ocupă de toată centrarea, astfel încât lucrurile să fie bine aliniate.
Scroll derulare. Eu întotdeauna dragoste atunci când văd derularea CSS care se prinde în sălbăticie. Robin a făcut o alegere bună să-l folosească aici, deoarece oferă într-adevăr întreaga experiență de întoarcere a paginii în timp ce defilează prin cadre. Defilarea orizontală poate fi înnebunitoare, dar și extrem de elegantă atunci când este executată bine, așa cum este aici în modul în care îmbunătățește designul cu coloană îngustă. Dacă doriți o explicație plăcută despre cum funcționează totul, Robin are și el scris despre derularea orizontală.