CSS Sprite Nedir? Faydaları Nelerdir? Nasıl Kullanılır?

CSS Sprıte Nedır?

Css Sprite, tema içerisinde kullanmış olduğumuz grafikleri sıralanmış bir halde birleştirilip kullanılmasına verilen addır. Örneğin temanızın resim klasöründe 50 tane resim var ve bu 50 tane resmi tek bir resim dosyasında bir araya getirip kullanmak istiyorsunuz, göstermek istediğiniz resimleri css kodları sayesinde bu dosyadan sitenize ekliyorsunuz.

CSS Sprite Yönteminin Faydaları Nelerdir?

Css Sprite tekniğinin faydalarını anlamak aslında o kadar da zor değil. Yukarıda anlattığım gibi web sitenize 50 resim olduğunu düşünün ve 50 farklı resmi site tanımlarken nasıl bir trafik harcayacağını düşünün. 50 Farklı resmi tanımlamak yerine 1 tane resmi tanımlamış olacaksınız ve bu nedenle web siteniz daha hızlı çalışacak.

CSS Sprite Nasıl Kullanılır?

Css sprıte yönteminin nasıl kullanıldığını aşağıda sırasıyla belirttim.

Öncelikle çalışma yapmak istediğiniz bir resim dosyası oluşturun ve resimlerin uzantısı “.PNG” olsun

Oluşturduğunuz resim dosyasına şöyle bir kod ekleyin; <a href=”http://www.alpersarbak.com/” title=”CSS Sprite”><div id=”logo”></div></a> Bu kod, “logo” ID’sine atayacağımız resme link verecek şekilde ayarlandı.

Şimdi ise işin mutfak kısmı yani css kısmına ve css dosyanıza eklemeniz gereken kod;

#logo{background:url(‘logo.png’);width:125px;height:125px;}
#logo:hover{background:url(‘logo.png’);width:125px;height:125px; background-position: bottom right;}

Kodu şöyle bir incelemek gerekirse, ilk satır göründüğü gibi logo adresini ve logo adresinin yükseklik ve genişliğini tanımladık. İkinci satırda bulunan kod ise logonun üzerine geldiğimizde gözükecek olan resmin boyutlarını ve id’sini tanımlıyor, tek fark ise konum belirtmemiz. Aslında aynı resmi tanımlamış oluyoruz.

Daha efektif ve hızlı çalışan web siteleri için kullanılması oldukça önemlidir.