CSS Generator ile CSS Sprite oluşturma (Resimli Anlatım)

Arkadaşlar bunu çevremde birkaç kişiye sordum, hepsi para istedi :) Bende hemen işin kıvrak tarafından dedim ki bu teknoloji neden var :) Kesin biri generatorunu yapmıştır :) Sağolsun Stoyan abimiz bir tane yapmış ve bende size bunun nasıl yapılacağını anlatacağım. Hazırsak başlıyoruz. Başlayalım. İlk önce sitemizi verelim :) http://csssprites.com/

Şimdi siteye girdik. Karşımıza yeşilli bir site çıktı. Resmi büyütmek için her zamanki gibi üzerine tıklıyoruz.

Ben deneme amaçlı 6 resim yükledim.

Bu kısımda Soldaki buton resmi indirmemize sağdaki kısım kodları almamız yardımcı olacak, yani büyük resmin içindeki resimlerin konumlarını ölçmenize gerek yok :) Sağdaki butona tıklayıp kaynağı görüntüle kısmından kodlara ulaşabilirsiniz. Şunun gibi;

<div style="background-position: -0px -0px; height: 135px; width: 180px;">
</div>
<div style="background-position: -0px -136px; height: 180px; width: 180px;">
</div>
<div style="background-position: -0px -317px; height: 60px; width: 60px;">
</div>
<div style="background-position: -0px -378px; height: 80px; width: 468px;">
</div>
<div style="background-position: -0px -459px; height: 58px; width: 60px;">
</div>
<div style="background-position: -0px -518px; height: 240px; width: 180px;">
</div>

Buradaki div kodlarını alıp malum resimlerin kodlarıyla yerlerini değiştiriyoruz. Yanlız, burada div id leri yok, neden koymamışlar anlayamadım, hani yukarıdaki resimde parent-element diye bir kod veriyor. İşte onun başındaki noktayı # şeklinde yapıyoruz ve div'e ekliyoruz. Blogger içinde;

</b:skin>

kodunu bulup üst kısmına ekliyoruz daha sonra resim divlerini resim kodlarıyla yerini değiştiriyoruz. Yani şöyle, resimlerimizi yükledik, kodumuzu şu şekilde ekledik,

#parent-element { background:url(RESİM LİNKİ);
}

Buradaki resim linkini adam gibi bir resim sağlayıcısına yükleyin çünkü ben blogger'ı denedim photobucketi denedim nedense hep resimler küçüldü. En sonunda imageshack'e yükledim oldu. Tamam şimdi kodu ekledik ve aşağıda bir örnek verdim. Resim linki ile divi yer değiştireceğiz.

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSMPOO19RuSnfRVUC9A1OGFJ_p2ef-Mt63RTe_VCmjmd-j_xzdby0izKqgmCOIbN52anhivOslYg0YlbBg9TtC7bBZiNTduHVNvIDq1Tw9Q_nlO2oCDaBwM0PIPstKwaOR_jct_msPST2M/s1600/google_chrome_logo.jpg" alt="" width="60" height="58" />

Bu resim linkimizdi şimdi bunu yerine div kodunu koyuyoruz.

<div style="background-position: -0px -518px; height: 240px; width: 180px;">
</div>

Bu 2 koddaki resim farklı kafanız karışmasın, bakın şimdi hani paren-element diye background resmine kocaman bir resim attık ya oradan bize lazım olan resmin konumunu buluyor. Oradan sonra ise genişlik ve yükseklik değerlerini ayarlıyor. İşlem bu kadar, hadi size kolay gelsin, takıldığınız yer olursa yazının altına yorum atabilirsiniz, sağlıcakla kalın.