Ilustrația lui Nick avea trei straturi diferite pentru capete. Sunt doar variații ușor diferite. Am putea schimba imaginile cu o animație sau cu JavaScript sau altceva, dar să avem o animație care rulează mereu (sau chiar una care rulează fiecare încărcare a paginii) ar fi probabil foarte enervant pentru utilizatorii de forumuri grele. În schimb, îl vom transforma într-un ou de Paște, adică o mică caracteristică pe care s-ar putea să nu o observați, cu excepția cazului în care vă întâlniți întâmplător.
Ceea ce vom face este să schimbăm imaginile atunci când fereastra browserului se redimensionează prin interogări @media. În loc de doar o mână de interogări @media care ar schimba capetele de câteva ori, vom face o încărcare de interogări @media care le schimbă la fiecare câțiva pixeli. Canalizarea esențială a spiritului „Lark Queries” al lui Arley McBlain.
Folosim o buclă Sass pentru a crea numeroasele interogări @media de care avem nevoie. În cele din urmă:
@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); ) ) )Ce este frumos la acest lucru este că nu încărcăm acele imagini suplimentare, cu excepția cazului în care pagina se redimensionează, așa că nu încărcăm lucruri suplimentare doar pentru un ou de Paște.