Nick's illustratie had drie verschillende lagen voor de hoofden. Het zijn gewoon iets andere variaties. We zouden de afbeeldingen kunnen uitwisselen met een animatie of met JavaScript of zoiets, maar een animatie die altijd draait (of zelfs een animatie die elke pagina laadt) zou waarschijnlijk enorm vervelend zijn voor zware forumgebruikers. In plaats daarvan maken we er een paasei van, dat wil zeggen, een kleine functie die je misschien niet opmerkt, tenzij je er toevallig over struikelt.
Wat we zullen doen, is de afbeeldingen uitwisselen wanneer het browservenster wordt vergroot of verkleind via @media-queries. In plaats van slechts een handvol @media-queries die de hoofden een paar keer zouden veranderen, maken we een hoop @media-queries die ze om de paar pixels veranderen. In wezen kanaliseren van de geest van Arley McBlains "Lark Queries.".
We gebruiken een Sass-lus om de vele @media-query's te maken die we nodig hebben. Uiteindelijk:
@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); ) ) )Het leuke hieraan is dat we die extra afbeeldingen niet laden, tenzij het formaat van de pagina wordt gewijzigd, dus we laden geen extra dingen alleen voor een paasei.