In Praise Of Shadows

Ponovno objavil Platon

Spremljevalci: 0

Naš dragi prijatelj Robin ima nov esej z naslovom V hvalo sencam. Zdaj, preden skočite tja in iščete drobce na sencah polj CSS, sencah besedila in filtrih senc ... to je ne tisto. To je esej o fotografiji in o tem, kaj se je Robin naučil o podajanju senc s fotoaparatom.

Torej, zakaj deliti to? Ker je hudičevo kul, da je naredil stran za članke, posvečeno enemu eseju. In veliko se boste naučili o CSS, če na njem odprete DevTools:

Tehnike centriranja. Opazite, kako se CSS Grid uporablja na <body> preprosto za sredino brošure. Nato ga Robin znova poseže po vsakem .frame eseja narediti isto stvar z vsebino.
"Lažne" slike ozadja. Robin bi si lahko naredil veliko dela, če bi za vsakega ustvaril razred CSS .frame da dobite slike ozadja. Namesto tega uporablja object-fit: cover na vstavljenem HTML-ju <img>s, da med polnjenjem ohranite razmerje stranic .frame posoda. (Pravzaprav je napisano o tem prej.) To zagotovo prihrani veliko CSS-ja, vendar mu tudi omogoča uporabo nadomestnega besedila, če je potrebno. Nekako se sprašujem, če a <figure>/<figcaption> struktura bi lahko delovala tukaj, vendar dvomim, da bi zagotovila veliko dodatne koristi za to, kar se dogaja.
Zlaganje kontekstov. Še ena prednost teh lažnih slik v ozadju? Uporabljajo absolutno pozicioniranje, ki ustvari kontekst zlaganja, kar Robinu omogoča, da nastavi a z-index: 0 na slikah. Tako se besedilo naloži neposredno na vrh z-index: 1. Spet CSS Grid skrbi za vse centriranje, tako da so stvari lepo poravnane.
Scroll snapping. jaz vedno ljubezen to, ko vidim, da drsnik CSS zaskoči v naravi. Robin se je dobro odločil, da ga uporabi tukaj, saj resnično omogoča celotno izkušnjo obračanja strani med premikanjem po okvirjih. Vodoravno drsenje je lahko osupljivo, a tudi izjemno elegantno, če je dobro izvedeno, saj je tukaj v tem, kako izboljša zasnovo ozkih stolpcev. Če želite lepo razlago, kako vse skupaj deluje, jo ima tudi Robin napisano o zaskoku vodoravnega pomika.