Nicki illustratsioonil oli peade jaoks kolm erinevat kihti. Need on lihtsalt veidi erinevad variatsioonid. Võiksime pildid animatsiooni või JavaScripti vms abil välja vahetada, kuid alati töötava (või isegi iga lehekoormust käitava) animatsiooni olemasolu oleks raskete foorumite kasutajate jaoks tõenäoliselt megatüütu. Selle asemel teeme sellest lihavõttemuna, see on väike funktsioon, mida te ei pruugi märgata, kui juhtute juhuslikult selle otsa komistama.
Mida me teeme, on piltide vahetamine, kui brauseriakna suurust muudetakse @media päringute kaudu. Lihtsalt käputäie @media päringute asemel, mis paar korda pead vahetaksid, teeme hulga @media päringuid, mis muudavad neid iga paari piksli tagant. Sisuliselt Arley McBlaini "Lark Queries" vaimu suunamine.
Me kasutame paljude vajalike @media päringute loomiseks Sass-silmust. Lõppkokkuvõttes:
@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); ) ) )Selle juures on tore, et me ei lae neid lisapilte enne, kui lehe suurust muudetakse, nii et me ei laadi lisakraami ainult lihavõttemuna jaoks.