Ilustrasi Nick memiliki tiga lapisan berbeda untuk kepalanya. Mereka hanyalah variasi yang sedikit berbeda. Kami dapat menukar gambar dengan animasi atau dengan JavaScript atau sesuatu tetapi memiliki animasi yang selalu berjalan (atau bahkan yang menjalankan setiap pemuatan halaman) mungkin akan sangat mengganggu bagi pengguna forum yang berat. Sebaliknya, kami akan menjadikannya telur Paskah, yaitu, fitur kecil yang mungkin tidak Anda perhatikan kecuali Anda kebetulan menemukannya secara acak.
Apa yang akan kami lakukan adalah menukar gambar saat jendela browser diubah ukurannya melalui kueri @media. Alih-alih hanya beberapa kueri @media yang akan mengubah head beberapa kali, kami akan membuat banyak kueri @media yang mengubahnya setiap beberapa piksel. Pada dasarnya menyalurkan semangat "Lark Queries" Arley McBlain.
Kami menggunakan loop Sass untuk membuat banyak kueri @media yang kami butuhkan. Akhirnya:
@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); ) ) )Yang menyenangkan tentang ini adalah kami tidak memuat gambar tambahan itu kecuali halaman diubah ukurannya sehingga kami tidak memuat barang tambahan hanya untuk telur Paskah.