css sprite, css logo, css code, css sprite logo, css, css kod, css wordpress

CSS Sprite Nedir?

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 sprite 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.

CSS Sprite Nedir? Faydaları Nelerdir? Nasıl Kullanılır? için 1 cevap

  • Hocam emeğinize sağlık. web sitesi ne kadar hızlı açılırsa Google gözündede o derece önemli oluyor haliyle. Belirttiğiniz kodları derhal uygulayacağım. Emeğinize sağlık tekrar teşekkürler

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Reklam