Varjojen ylistykseen

Julkaissut Platon

seuraajia: 0

Rakkaalla ystävällämme Robinilla on uusi essee nimeltä Varjojen ylistys. Nyt, ennen kuin hyppäät sinne etsimään CSS-ruutujen varjoja, tekstivarjoja ja varjosuodattimia... tämä on ei se. Se on essee valokuvauksesta ja siitä, mitä Robin on oppinut varjojen luovuttamisesta kameralla.

Joten miksi jakaa tätä? Koska on hienoa, että hän teki artikkelille suunnatun sivun yhdelle esseelle. Ja opit paljon CSS:stä, jos avaat DevToolsin siinä:

Keskitystekniikat. Huomaa, kuinka CSS-ruudukkoa käytetään <body> yksinkertaisesti siihen keskittää esitteen. Sitten Robin kurkottelee sitä uudelleen jokaisella .frame tehdä sama asia sisällön kanssa.
"Faux" taustakuvat. Robin olisi voinut tehdä paljon työtä itselleen luomalla kullekin CSS-luokan .frame saadaksesi taustakuvia. Sen sijaan hän käyttää object-fit: cover upotetussa HTML:ssä <img>s säilyttää kuvasuhteen täyttäessäsi .frame kontti. (Hän itse asiassa kirjoitettu tästä ennen.) Tämä säästää varmasti paljon CSS:ää, mutta antaa hänelle myös mahdollisuuden käyttää vaihtoehtoista tekstiä tarvittaessa. Ihmettelen vähän jos a <figure>/<figcaption> rakenne olisi voinut toimia täällä sen sijaan, mutta epäilen, että se tarjoaisi paljon lisähyötyä tapahtuvalle.
Kontekstien pinoaminen. Toinen etu noista tekotaustakuvista? He käyttävät absoluuttista paikannusta, joka luo pinoamiskontekstin, jolloin Robin voi asettaa a z-index: 0 kuvien päällä. Näin teksti pinoutuu suoraan päälle z-index: 1. Jälleen CSS Grid hoitaa kaiken keskittämisen, joten asiat ovat hienosti kohdistettu.
Rullauksen napsauttaminen. minä aina rakkaus sen kun näen CSS-rullan napsauttavan luonnossa. Robin teki hyvän valinnan käyttää sitä tässä, koska se todella lainaa koko sivun kääntämisen kokemusta selaamalla kehyksiä. Vaakasuora vieritys voi olla raivostuttavaa, mutta myös erittäin tyylikästä, kun se toteutetaan hyvin, koska se on tässä, kuinka se parantaa kapean sarakkeen muotoilua. Jos haluat mukavan selityksen siitä, miten se kaikki toimii, Robin on myös kirjoitettu vaakasuuntaisesta rullauksesta.