CSS Sprite tekniği, basitçe tanımlamak gerekirse; sitenin tasarımında kullanılan resimlerin tek bir resim dosyasında birleştirilmesi ve kullanılması gereken yerlerde tek bir resmin çağırılarak değişik bölgelerinin gösterilmesinin sağlanması olarak tanımlanabilir. Tanım biraz karışık oldu galiba, uygulamaya başlayınca anlaşılacaktır umarım.
Öncelikle tasarımımızda kullanacağımız resimlerimizi bulalım. Ben basit olması açısından 2 adet ikonu birleştirdim. Oluşan tek resmimiz şu:
Bu iki ikondan oluşan görseli ayrı ayrı iki ikon olarak kullanmak için şöyle bir kod kullanıyoruz.
CSS Kodlarımız
.file { width:16px; height:14px; background:url(images.png) 0 0; }
.calendar { width:16px; height:16px; background:url(images.png) 0 -14px; }HTML Kodlarımız
<img src="trans.png" class="file" />
<img src="trans.png" class="calendar" />
trans.png: Saydam bir görsel png dosyasıdır. Bu resimi çağırıp, arkaplan olarak istediğimiz resmi göstereceğiz.
Öncelikle birleştirdiğimiz resmimizi Fireworks veya pikselleri ölçebileceğimiz bir editör ile açıyoruz. Göstermek istediğimiz resmin boyutlarını ölçüyoruz. Benim klasör resmim 16×14 piksellik bir resim olduğu için, CSS kodlarında .file parametresinin genişliğine 16 yüksekliğine 14 veriyoruz.
Arkaplan resmi olarka images.png dosyasını çağırıyoruz. Bundan sonra yazdığımız iki rakama dikkat. Bunlar, çağırdığımız bütünleşik görsel dosyasının hangi noktasından itibaren kullanacağımızı belirtiyor. Resmin en baş kısmında klasör resmi yer aldığı için .file parametresinde bu değerleri 0 0 yaptık. Ama .calendar parametresine bakarsanız, 0 -14px değerlerini görürsünüz. Birinci sıfır soldan sağa girintiyi belirtiyor. Herhangi bir girinti olmadığı için sıfır (0) verdik. -14px ise yukarıdan aşağıya kaç piksel aşağıdan başlayacağımızı ifade ediyor. Başında eksi(-) işareti, görselin yukarı çekilip ortadan başlayacağını ifade etmek içindir. Yani o eksi işaretini koymazsanız, resim 14px aşağıya itilir ve 14 piksellik bir boşluktan sonra resmi görmeye başlarız.
Kullandığım dosyaları ve HTML dosyasını ekte veriyorum. Daha detaylı incelemek isteyen arkadaşlar indirebilirler.
Bir sonraki yazımda tekrar eden (repeat) arkaplan resimleri için bu özelliğin nasıl kullanılacağını anlatacağım.
Ek Dosyalar Kaynak