PHP | Jquery | Css | Codeigniter | Unity3D


Web sayfanızda kullanacak olduğunuz özellikle :hover kullanacak olduğunuz linklerde resim dosyaları kullanırsınız. Yani Photoshop da ikon tasarlayıp üzerine gelince şu resim dosyası arkaplan olsun gibi kullanımlar söz konusu olduğu durumlarda css sprite kullanabilirsiniz.

Css sprite kullanmanın, kullanım kolaylığından çok web sayfasının açılma performansına da katkısı büyüktür. Her ikon için farklı resim dosyaları yüklemek yerine hepsini bir resim dosyasında organize edip css ile istediğiniz konumdakini kullanmanız mümkündür.

Bu sprite Youtube un kullandığı css sprite dosyasıdır.

CSS Sprite kullanımı


 .logo{
    
  background: url('logo.png') 0 0 no-repeat;

  }
 
  .logo:hover{ // Üzerine gelindiğinde
    
   background-position: -60px 0px;
  
   }

Örnek dosyalar



Soru ve Tartışma Konularınız için;

Yayınlayan
comments powered by Disqus
Yazar: Windofelm
Description: Sayfa içerisinde linklerde kullanıcak olduğunuz ikonları ayrı ayrı resim dosyaları halinde kullanmak yerine tek bir resim dosyasında birleştirip kullanabilirsiniz.