CSS Sprite Görsel - Image Sprites
Sayfamızda ki görsellerin (butonlar,logolar,ikonlar vs.) tümünü veya bir kısmını tek görselde birleştirmeye Sprite / Çoklu Görsel deniliyor. Sayfamızda ki her görselin ayrı ayrı yüklenmesi fazla zaman alabilmektedir, bu nedenle Sprite Görsel kullanımı bize hız kazandıracaktır. Sprite Görsel sunucu isteklerinin sayısını azaltır ve bant genişliği tasarrufu da sağlar.
Görsellerin (butonlar,logolar,ikonlar vs.) sağında veya solunda metin olacaksa yani inline eleman ise Sprite Görsel imizde ki görseller alt alta olmalıdır. Eğer görsellerin (butonlar,logolar,ikonlar vs.) sağında veya solunda metin olmayacaksa yani block eleman ise Sprite Görsel imiz yan yana olmalıdır.
Aşağıda ki tek parça olan sprite görseli nasıl kullanacağımızı görelim...
CSS kodu:
.sprite_bir {list-style:none;
width:20px;
height:23px;
padding-top:12px;
background:url('../../images/sprite.jpg') no-repeat 0 0;
}
.sprite_iki {
list-style:none;
width:20px;
height:20px;
padding-top:5px;
background:url('../../images/sprite.jpg') no-repeat 0 -62px;
}
a {
padding-left:50px;
}
background özelliği içinde verilmiş olan değişik bir değer görüyoruz ( background:url('../../images/sprite.jpg') no-repeat 0 -62px; ). Bu bir kombine CSS kullanımıdır (Sıfır değerlerinde px , % , em vb kullanımlara gerek yoktur.). Aslında orada ki kullanım şu anlama gelmektedir: background-position: 0 -62px;. Bu kullanımı hatırlamak için buraya tıklayabilirsiniz.
HTML/XHTML kodu:
<ul><li class="sprite_bir"> <a href="#">Apple</a> </li>
<li class="sprite_iki"> <a href="#">Hata</a> </li>
</ul>
Yukarıda ki kodlarımız çalıştığında tek parça görsel ile aşağıda ki gibi bir görüntü elde edeceğiz.