CSS Sprite nedir, nasıl kullanılır?

Sitenizi optimize etmeye özen gösterirsiniz. Bizde bu yazımızda sitenizin optimizayonuna katkıda bulunacak bir teknikten, CSS Sprite tekniğinden bahsedeceğiz.

CSS Sprite nedir?
En basit tanımıyla CSS Sprite sitenizdeki resimleri tek bir resimde birleştirerek sitenizin açılış hızını destekleyen, sadece HTML ve CSS kullanarak hazırlanan bir tekniktir.

CSS Sprite tekniğini kullanan popüler sosyal ağlar
Facebook


Google Plus


Twitter




Nasıl kullanılır?

Çok basit bir sistem olmasına rağmen HTML ve CSS konusunda hiçbir bilginiz yoksa bu konuda zorlanabilirsiniz. Şimdi bu işlemi yapmakta bize yardımcı olacak siteye geçelim. Sprite Cow adlı bu site ile çok kolay bir şekilde css sprite tekniğini kullanabileceğiz.

Öncelikle sitenin ana sayfasında Open Image yazısına tıklıyoruz ve bilgisayarımızdan bir resim seçiyoruz.

Daha sonra faremizin sol tuşuna basılı tutarak elle, üstüne bir kez tıklayarakda otomatik seçim yapmasınız sağlıyoruz.

.sprite { background: url('imgs/png.png') no-repeat -2px -5px; width: 126px; height: 126px; }

Şimdi diğer resmimizin üstüne tıklayarak otomatik seçim yapmasını sağlıyoruz.

.sprite { background: url('imgs/png.png') no-repeat -1px -132px; width: 127px; height: 124px; }

Şimdi aldığımız bu kodları nasıl kullanacağımızı açıklayalım.

HTML Kodu

<a class="sprite" href=”http://www.delipenguen.com”></a>

CSS Kodu

a.sprite { background: url(‘images/firefox_chrome.png’) no-repeat -2px -5px; width: 126px; height: 126px; display:block; }
a:hover.sprite { background: url(‘images/firefox_chrome.png’) no-repeat -1px -132px; width: 127px; height: 124px; display:block; }

Css koduna ek olarak display:block; kodunuda ekledikten sonra kodumuz tamamlanmış oluyor. Ayrıca css kodu içindeki images/firefox_chrome.png bölümünü kendinize göre düzenlemeniz gerekmektedir.

Demoyu görüntülemek için tıklayın.