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örseldeniliyor. 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.
İhtiyacınıza göre görselleri alt alta veya yan yana birleştirebilirsiniz.
Aşağıda ki tek parça olan sprite görseli nasıl kullanacağımızı görelim...
CSS kodu:
.spriteBir {
list-style: none;
width: 20px;
height: 23px;
padding-top: 12px;
background: url('/images/sprite.jpg') no-repeat 0 0;
}
.spriteIki {
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
0 yorum: