Az Árnyak dicséretében

Újra kiadta Platón

Követő: 0

Drága barátunknak, Robinnak van egy új esszéje a címmel Árnyak dicséretében. Most, mielőtt odaugrál, hogy a CSS-doboz-árnyékokon, a szövegárnyékokon és az árnyékszűrőkön rögöket keressen… azt nem. Ez egy esszé a fotózásról és arról, hogy Robin mit tanult az árnyékok kamerával való átadásáról.

Szóval, miért kell ezt megosztani? Mert olyan menő, hogy készített egy cikkre irányított oldalt egy esszének szentelve. És sok mindent megtudhat a CSS-ről, ha feltöri rajta a DevTools-t:

Központozási technikák. Figyelje meg, hogyan használják a CSS Grid-et a <body> egyszerűen arra középre a füzetet. Aztán Robin mindegyiken újra utána nyúl .frame hogy ugyanezt tegye a tartalommal.
„Faux” háttérképek. Robin sokat dolgozhatott volna magán, ha mindegyikhez létrehoz egy CSS-osztályt .frame hogy megkapja a háttérképeket. Ehelyett használja object-fit: cover beépített HTML-en <img>s hogy megőrizze a képarányt a kitöltése közben .frame tartály. (Valójában ő írt erről Előtte.) Ezzel sok CSS-t takaríthat meg, de szükség esetén alternatív szöveget is használhat. Kíváncsi vagyok, vajon a <figure>/<figcaption> a struktúra működhetett volna itt helyette, de kétlem, hogy ez sok további hasznot hozna ahhoz, ami most történik.
Kontextusok halmozása. Egy másik előnye ezeknek a hamis háttérképeknek? Abszolút pozicionálást használnak, amely halmozási kontextust hoz létre, lehetővé téve Robinnak, hogy beállítsa a z-index: 0 a képeken. Így a szöveg közvetlenül a tetejére kerül z-index: 1. Ismét a CSS Grid kezeli az összes központosítást, így a dolgok szépen igazodnak.
Scroll csattanó. én mindig szerelem amikor látom, hogy a CSS görgető csattan a természetben. Robin jól választotta, hogy itt használja, mert valóban átadja a lapozás élményét a képkockák között. A vízszintes görgetés őrjítő tud lenni, de rendkívül elegáns is, ha jól hajtják végre, ahogy itt van a keskeny oszlopos kialakításban. Ha szeretnél egy szép magyarázatot arról, hogyan működik mindez, Robin is megteszi a vízszintes görgetésről írt.