Zephyrnet-logo

In lof der schaduwen

Datum:

Onze lieve vriend Robin heeft een nieuw essay genaamd In lof der schaduwen. Nu, voordat je daarheen springt op zoek naar goudklompjes op CSS-boxschaduwen, tekstschaduwen en schaduwfilters ... dit is niet dat. Het is een essay over fotografie en wat Robin heeft geleerd over het omgaan met schaduwen met een camera.

Dus waarom dit delen? Omdat het zo cool is dat hij een op een artikel gerichte pagina heeft gemaakt die aan één essay is gewijd. En je zult veel leren over CSS als je DevTools erop openbreekt:

  • Centreer technieken. Merk op hoe CSS Grid wordt gebruikt op de <body> gewoon om centreer het pamflet. Dan reikt Robin er op elk weer naar .frame van het essay hetzelfde te doen met de inhoud.
  • "Faux" achtergrondafbeeldingen. Robin had veel werk voor zichzelf kunnen maken door voor elk een CSS-klasse te maken .frame om de achtergrondafbeeldingen te krijgen. In plaats daarvan gebruikt hij object-fit: cover op inline HTML <img>s om de beeldverhouding te behouden tijdens het vullen van de .frame container. (Hij is eigenlijk hierover geschreven eerder.) Dat scheelt zeker veel CSS'en, maar het stelt hem ook in staat om alt-tekst te gebruiken als dat nodig is. Ik vraag me af of een <figure>/<figcaption> structuur had hier kunnen werken, maar ik betwijfel of het veel extra voordeel zou opleveren voor wat er gaande is.
  • Contexten stapelen. Nog een voordeel van die faux-achtergrondafbeeldingen? Ze gebruiken absolute positionering die een stapelcontext creëert, waardoor Robin een z-index: 0 op de afbeeldingen. Op die manier wordt de tekst direct bovenop gestapeld met z-index: 1. Nogmaals, CSS Grid zorgt voor alle centrering, zodat de dingen mooi zijn uitgelijnd.
  • Scrollen snappen. Ik altijd liefde het wanneer ik CSS-scroll in het wild zie klikken. Robin heeft een goede keuze gemaakt om het hier te gebruiken, omdat het echt bijdraagt ​​aan de hele pagina-omslaande ervaring tijdens het scrollen door frames. Horizontaal scrollen kan gekmakend zijn, maar ook buitengewoon elegant als het goed wordt uitgevoerd, zoals hier in hoe het het ontwerp met smalle kolommen verbetert. Wil je een leuke uitleg hoe het allemaal werkt, Robin heeft dat ook geschreven over horizontaal scrollen.

Robin is in ieder geval een uitstekende schrijver en het is de moeite waard om alles te lezen wat hij publiceert, CSS en meer.


Directe link →

spot_img

Laatste intelligentie

spot_img