CSS Görüntü Sprite'ları
Görüntü Sprite'ları
Bir görüntü hareketli grafiği, tek bir görüntüye yerleştirilmiş bir görüntü koleksiyonudur.
Çok sayıda resim içeren bir web sayfasının yüklenmesi uzun zaman alabilir ve birden çok sunucu isteği oluşturur.
Görüntü hareketli grafiklerinin kullanılması, sunucu isteklerinin sayısını azaltacak ve bant genişliğinden tasarruf sağlayacaktır.
Görüntü Spriteları - Basit Örnek
Üç ayrı resim kullanmak yerine bu tek resmi kullanıyoruz ("img_navsprites.gif"):
CSS ile görüntünün sadece ihtiyacımız olan kısmını gösterebiliriz.
Aşağıdaki örnekte CSS, "img_navsprites.gif" görüntüsünün hangi bölümünün gösterileceğini belirtir:
Örnek
#home
{
width: 46px;
height: 44px;
background: url(img_navsprites.gif) 0 0;
}
Örnek açıkladı:
<img id="home" src="img_trans.gif">- src özniteliği boş olamayacağı için yalnızca küçük bir saydam görüntüyü tanımlar. Görüntülenen resim, CSS'de belirttiğimiz arka plan resmi olacaktır.width: 46px; height: 44px;- Resmin kullanmak istediğimiz kısmını tanımlarbackground: url(img_navsprites.gif) 0 0;- Arka plan görüntüsünü ve konumunu tanımlar (sol 0 piksel, üst 0 piksel)
Bu, görüntü hareketli grafiklerini kullanmanın en kolay yoludur, şimdi onu bağlantılar ve fareyle üzerine gelme efektleri kullanarak genişletmek istiyoruz.
Image Sprites - Bir Gezinme Listesi Oluşturun
Bir gezinme listesi oluşturmak için hareketli resmi ("img_navsprites.gif") kullanmak istiyoruz.
Bir bağlantı olabileceği ve ayrıca bir arka plan resmini desteklediği için bir HTML listesi kullanacağız:
Örnek
#navlist {
position: relative;
}
#navlist li {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
top: 0;
}
#navlist li, #navlist a {
height: 44px;
display: block;
}
#home {
left: 0px;
width: 46px;
background: url('img_navsprites.gif')
0 0;
}
#prev {
left: 63px;
width: 43px;
background: url('img_navsprites.gif') -47px 0;
}
#next {
left: 129px;
width: 43px;
background: url('img_navsprites.gif')
-91px 0;
}
Örnek açıkladı:
- #navlist {position:relative;} - içinde mutlak konumlandırmaya izin vermek için konum göreli olarak ayarlanır
- #navlist li {margin:0;padding:0;list-style:none;position:absolute;top:0;} - kenar boşluğu ve dolgu 0'a ayarlanır, liste stili kaldırılır ve tüm liste öğeleri mutlak olarak konumlandırılır
- #navlist li, #navlist a {height:44px;display:block;} - tüm resimlerin yüksekliği 44 pikseldir
Şimdi her bir belirli parça için konumlandırmaya ve stil vermeye başlayın:
- #home {left:0px;width:46px;} - Tamamen sola konumlandırılmış ve görüntünün genişliği 46px
- #home {background:url(img_navsprites.gif) 0 0;} - Arka plan resmini ve konumunu tanımlar (sol 0 piksel, üst 0 piksel)
- #prev {left:63px;width:43px;} - 63px sağa (#home width 46px + öğeler arasında fazladan boşluk) konumlandırılır ve genişlik 43px'dir.
- #prev {background:url('img_navsprites.gif') -47px 0;} - Sağdaki 47px arka plan resmini tanımlar (#home width 46px + 1px çizgi bölücü)
- #next {left:129px;width:43px;}- 129px sağa yerleştirilir (#prev'in başlangıcı 63px + #prev genişlik 43px + fazladan boşluktur) ve genişlik 43px'dir.
- #next {background:url('img_navsprites.gif') -91px 0;} - Sağdaki 91px arka plan resmini tanımlar (#home width 46px + 1px line bölücü + #prev width 43px + 1px line bölücü )
Görüntü Spriteları - Hover Efekti
Şimdi gezinme listemize bir vurgulu efekti eklemek istiyoruz.
İpucu: Seçici :hover, yalnızca bağlantılarda değil, tüm öğelerde kullanılabilir.
Yeni resmimiz ("img_navsprites_hover.gif"), fareyle üzerine gelme efektleri için kullanılacak üç gezinme resmi ve üç resim içerir:
Bu, altı ayrı dosya değil, tek bir resim olduğundan, kullanıcı fareyle resmin üzerine geldiğinde yükleme gecikmesi olmaz .
Fareyle üzerine gelme efektini eklemek için yalnızca üç satır kod ekliyoruz:
Örnek
#home a:hover {
background: url('img_navsprites_hover.gif') 0 -45px;
}
#prev a:hover {
background: url('img_navsprites_hover.gif') -47px
-45px;
}
#next a:hover {
background: url('img_navsprites_hover.gif') -91px
-45px;
}
Örnek açıkladı:
- #home a:hover {background: url('img_navsprites_hover.gif') 0 -45px;} - Üç vurgulu görüntünün tümü için aynı arka plan konumunu belirtiriz, yalnızca 45px daha aşağıda