Nick'in illüstrasyonunda kafalar için üç farklı katman vardı. Sadece biraz farklı varyasyonlardır. Görüntüleri bir animasyonla veya JavaScript veya başka bir şeyle değiştirebiliriz, ancak her zaman çalışan bir animasyona sahip olmak (veya her sayfa yüklemesini çalıştıran bir animasyon bile) muhtemelen ağır forum kullanıcıları için çok can sıkıcı olacaktır. Bunun yerine onu bir Paskalya yumurtası yapacağız, yani rastgele rastlamadığınız sürece fark etmeyeceğiniz küçük bir özellik.
Yapacağımız şey, tarayıcı penceresi @media sorguları aracılığıyla yeniden boyutlandırıldığında görüntüleri değiştirmektir. Kafaları birkaç kez değiştirecek bir avuç @media sorgusu yerine, her birkaç pikselde bir değiştiren bir yığın @media sorgusu yapacağız. Esasen Arley McBlain'in "Lark Sorguları" nın ruhunu kanalize etmek.
İhtiyacımız olan birçok @media sorgusunu oluşturmak için bir Sass döngüsü kullanıyoruz. Sonuçta:
@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); ) ) )Bunun güzel yanı, sayfa yeniden boyutlandırılmadıkça bu ek resimleri yüklemiyoruz, bu nedenle yalnızca bir Paskalya yumurtası için fazladan şeyler yüklemiyoruz.