Selamlar;

Bu yazımda benim çok hoşuma giden Css Sprite tekniğinden bahsetmek istiyorum.

Diyelimki web sayfamızda bir butonumuz var ve mouse ile üzerine geldiğimizde buton üzerindeki resmin değişmesini istiyoruz.

Bunun bir çok alternatifi var tabikide ama sprite tekniği bize en güzel sonucu vermekte.

Asıl amaç sayfada bulunan tüm görsel öğeleri bir resim dosyasında toplayıp tüm görsellerin bir kerede yüklenmesi.

Siyah-beyaz olan sosyal ağlar logolarının üstüne gelince renklendirelim.

Tüm istediğimiz görselleri bir karede toplamak için photoshop veya benzeri bir program kullanırdık ve hizalamak işin en önemli kısmıydı. Ama artık Css Sprite Generator diye bir site bu işi bizim için yapıyor.

Tüm görsellerimizi tek tek hazırladıktan sonra hepsini bir .zip klasörüne kopyalıyoruz.

Ardından http://tr.spritegen.website-performance.org/ sayfasına girerek oluşturduğumuz zip dosyasını yüklüyoruz. Zip dosyasını seçtikten sonra aşağıdaki parametreleri değiştirmemize gerek yok sadece dikey aralık parametresini 1 olarak değiştrebiliriz. Buda resimler arası 1px boşluk olması için. Diğer türlü resmimiz gereksiz büyük olabiliyor.

Ziplediğimiz dosyayı yükledikten sonra en
altta tümleşik resim dosyasını ve css kodlarını üret butonuna basıyoruz.

Ve böyle bir ekran geliyor. Aşağıda Tümleşik Resim Dosyanızı indirin butonuna basarak birleşik resim dosyasını indiriyoruz.

Css kodlarımız da hazır olarak geliyor.

Benim resmim şu şekilde oldu;

Bu aşamadan sonra Css kodlarında ufak değişiklikler yapmamız gerekiyor.

Asıl amaç siyah beyaz olan logoya gelince renklenmesi. Bunun için 3 adet div oluşturuyoruz. Ve classlarına isim veriyoruz.