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="http://1.bp.blogspot.com/-f9qt9fk4G9k/TirOM6AQgiI/AAAAAAAABIM/7JW7b5Zy2VQ/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.

Furkan Özden

Blog dünyası ile 2009 yılında tanıştım. Bloğumda haftada en az bir yazı yayımlıyorum. Yazdığım yazıları beğendiyseniz beni Twitter'dan (@frknzdn) takip edebilirsiniz. Daha fazlası için hakkımda sayfasını ziyaret edin.

6 Cevaplar

  1. Kursat dedi ki:

    Ben yapamadım tam olarak. pagespeedde yüksek öncelikle bunları önerdi.

    Ölçeklenmiş resimler sunun
    Tarayıcı önbellekleme özelliğinden yararlanın
    Resimleri CSS sprite görseller içinde birleştirin

    Hangisini nasıl yapacağımı bilmiyorum. Yardımcı olur musunuz

  2. herbalife dedi ki:

    Paylaşım için teşekkür ederim. Çok güzel anlatmışsınız ama benim kodlama bilgim olmadığı için işi tam çözemedim.

  3. zeynep dedi ki:

    css sprite ne demek ?

  4. Anonymous dedi ki:

    selam ben vbulletin kulanıyorum acaba olur mu ? bir çok şablon falan var kodları nereye kopyalamalıyım ?

  5. TheChucky dedi ki:

    çok teşekkürler işime yaradı 🙂

  6. Anonymous dedi ki:

    paylaşım için çook teşekkürler

Bir Cevap Yazın

Bunlar da hoşunuza gidebilir...

%d blogcu bunu beğendi: