L'illustrazione di Nick aveva tre diversi strati per le teste. Sono solo variazioni leggermente diverse. Potremmo scambiare le immagini con un'animazione o con JavaScript o qualcosa del genere, ma avere un'animazione sempre in esecuzione (o anche una che esegue ogni caricamento della pagina) sarebbe probabilmente mega-fastidioso per gli utenti di forum pesanti. Invece lo faremo un uovo di Pasqua, cioè una piccola caratteristica che potresti non notare a meno che non ti capiti di imbatterti casualmente.
Quello che faremo è sostituire le immagini quando la finestra del browser viene ridimensionata tramite query @media. Invece di una manciata di query @media che cambierebbero le testine un paio di volte, faremo un sacco di query @media che le cambiano ogni pochi pixel. Essenzialmente canalizzare lo spirito di "Lark Queries" di Arley McBlain.
Usiamo un ciclo Sass per creare le molte query @media di cui abbiamo bisogno. In definitiva:
@for $i from 25 through 125 ( @media (min-width: (($i+5)*15)+6+px) and (max-width: (($i+5)*15)+10+px) ( .forum-wrap ( background-image: url(… /wp-content/themes/CSS-Tricks-10/images/header-forums-2.png.webp); ) ) @media (min-width: (($i+5)*15)+11+px) and (max-width: (($i+5)*15)+15+px) ( .forum-wrap ( background-image: url(… /wp-content/themes/CSS-Tricks-10/images/header-forums-3.png.webp); ) ) )La cosa bella di questo è che non carichiamo quelle immagini aggiuntive a meno che la pagina non venga ridimensionata, quindi non stiamo caricando materiale extra solo per un uovo di Pasqua.