Elogio delle ombre

Ripubblicato da Platone

Seguaci: 0

Il nostro caro amico Robin ha un nuovo saggio intitolato Elogio delle ombre. Ora, prima di fare un salto lì alla ricerca di pepite sulle ombre dei box CSS, delle ombre del testo e dei filtri ombra... questo è non quello. È un saggio sulla fotografia e su ciò che Robin ha imparato su come gestire le ombre con una macchina fotografica.

Quindi, perché condividerlo? Perché è fantastico da morire che abbia creato una pagina diretta da un articolo dedicata a un saggio. E imparerai molto sui CSS se apri DevTools su di esso:

Tecniche di centratura. Nota come viene utilizzata la griglia CSS nel file <body> semplicemente per centrare l'opuscolo. Poi Robin lo riprende di nuovo su ciascuno .frame del saggio a fare la stessa cosa con il contenuto.
Immagini di sfondo "false". Robin avrebbe potuto lavorare molto da solo creando una classe CSS per ciascuno .frame per ottenere le immagini di sfondo. Invece, usa object-fit: cover sull'HTML incorporato <img>Aiuta a mantenere le proporzioni durante il riempimento del file .frame contenitore. (Lo è in realtà scritto su questo prima.) Questo sicuramente fa risparmiare un sacco di CSS, ma gli permette anche di usare il testo alternativo se necessario. Mi chiedo se a <figure>/<figcaption> la struttura avrebbe potuto funzionare invece qui, ma dubito che fornirebbe molti vantaggi aggiuntivi per quello che sta succedendo.
Contesti di impilamento. Un altro vantaggio di quelle finte immagini di sfondo? Usano il posizionamento assoluto che crea un contesto di stacking, consentendo a Robin di impostare a z-index: 0 sulle immagini. In questo modo, il testo si impila direttamente sopra z-index: 1. Ancora una volta, CSS Grid gestisce tutta la centratura in modo che le cose siano ben allineate.
Scorrimento a scatto. io sempre amore quando vedo lo scorrimento CSS scattare in natura. Robin ha fatto una buona scelta di usarlo qui, dato che si presta davvero all'intera esperienza di girare le pagine mentre si scorrono i fotogrammi. Lo scorrimento orizzontale può essere esasperante, ma anche estremamente elegante se eseguito bene, come in questo caso nel modo in cui migliora il design a colonne strette. Se vuoi una bella spiegazione su come funziona, anche Robin ce l'ha scritto sullo snap dello scorrimento orizzontale.