CSS, en önemli kodlama dilidir. Neden diyecek olursanız, her ne kadar iyi bir yazılımcı ya da programcı olursanız olun, yaptığınız işi müşterilere/ziyaretçilere sunamadıktan sonra hiçbir anlamı yok. İşin tamamen görsel kısmını üstlenen CSS, kendi içerisindeki bazı özellikler ilede bizlerin işini kolaylaştırıyor. Bu yazımda anlatacağım CSS Sprite özelliği, birden çok resimi tek bir resim dosyasında birleştirerek, kullanacağınız resimleri bu tek resim dosyası içerisinden çekmenizi sağlıyor. Bunun amacı ise, 10 tane farklı resim kullanacağınızı varsayarsak, 10 farklı resim yüklemesi yapmak yerine, tek bir resim yüklemesi yaparak tüm resimlerin daha hızlı yüklenmesini ve sitenin açılış hızının azalmasını sağlamaktır.

CSS Sprite Nasıl Kullanılır?

• Öncelikle bir PNG dosyası oluşturun ve kullanmak istediğiniz resimlerin hepsini bu dosya içerisine ekleyin. Ben örnek olarak şöyle bir resim oluşturdum.
• Şimdi ise dosyamıza şöyle bir kod ekleyelim:

<a href="http://www.syorulmaz.com/" title="CSS Sprite"><div id="logo"></div></a>

• Şimdi ise CSS kısmına geçelim ve eklememiz gereken CSS kodlarını görelim:

#logo{background:url('logo.png');width:275px;height:47px;} #logo:hover{background:url('logo.png');width:275px;height:47px;}
Hemen kodu inceleyecek olursak, ilk olarak “logo.png” adresini tanımlıyoruz. Daha sonra buna bir genişlik ve yükseklik giriyoruz. 2. satırdaki kod ise “logo” ID’sinin üstüne geleceğinde çıkacak olan resimi gösteriyor. Aslında aynı resimi seçtik, işte CSS Sprite özelliğini burada anlamış oluyoruz. Aynı resim içerisindeki bir çok kısımı, farklı farklı resimler halinde göstereceğiz.

• Şimdi Sprite Cow sitesine girerek oluşturduğumuz resimi yüklüyoruz.
• Açılan resimden almak istediğimiz kısımı fare ile çerçeve içine alıyoruz ve hemen altında o resimin “bakcground-position“unu bize veriyor.
• Aldığımız background-position’u background kodu içerisine şu şekilde ekliyoruz:

#logo{background:url('logo.png') -14px -12px;width:275px;height:47px;} #logo:hover{background:url('logo.png') -14px -66px;width:275px;height:47px;}
Bu, seçtiğiniz alanın o resmin toplam genişlik ve yükseklik içerisinde X ve Y eksenlerini baz alarak size verilen bir değerdir.
Yazıma burada son veriyorum. CSS Sprite özelliği yeni web teknolojilerinde çok önemli bir konu olduğu için mutlaka kullanmanızı öneririm.

Örnek: CSS Sprite

Kaynak: SYorulmaz.com