I Lov Av Skuggor

Återutgiven av Platon

anhängare: 0

Vår kära vän Robin har en ny uppsats som heter I beröm av skuggor. Nu, innan du hoppar dit och letar efter nuggets på CSS-boxskuggor, textskuggor och skuggfilter... det här är inte det. Det är en uppsats om fotografi och vad Robin har lärt sig om att lämna skuggor med en kamera.

Så varför dela detta? För det är kul som fan att han gjorde en artikelriktad sida tillägnad en uppsats. Och du kommer att lära dig mycket om CSS om du öppnar DevTools på den:

Centreringstekniker. Lägg märke till hur CSS Grid används på <body> helt enkelt till centrera broschyren. Sedan sträcker sig Robin efter det igen på varje .frame av uppsatsen att göra samma sak med innehållet.
"Faux" bakgrundsbilder. Robin kunde ha gjort mycket arbete för sig själv genom att skapa en CSS-klass för var och en .frame för att få bakgrundsbilderna. Istället använder han object-fit: cover på infogat HTML <img>s för att bibehålla bildförhållandet medan du fyller .frame behållare. (Det är han faktiskt skrivet om detta tidigare.) Det sparar säkert en hel del CSS, men det tillåter honom också att använda alt-text om det behövs. Jag undrar lite om a <figure>/<figcaption> struktur kunde ha fungerat här istället, men jag tvivlar på att det skulle ge mycket ytterligare fördelar för vad som händer.
Stapling av sammanhang. En annan fördel med dessa falska bakgrundsbilder? De använder absolut positionering som skapar en staplingskontext, vilket gör att Robin kan ställa in en z-index: 0 på bilderna. På så sätt staplas texten direkt ovanpå z-index: 1. Återigen, CSS Grid hanterar all centrering så att saker och ting är snyggt anpassade.
Scroll snapping. Jag gör alltid älskar det när jag ser CSS-rullen knäppa i det vilda. Robin gjorde ett bra val att använda det här, eftersom det verkligen ger hela sidvändningsupplevelsen när du bläddrar igenom ramar. Horisontell rullning kan vara irriterande, men också extremt elegant när det utförs bra eftersom det är här i hur det förstärker den smala kolumndesignen. Vill du ha en bra förklaring på hur det hela fungerar så har Robin också skrivet om horisontell scroll snapping.