Kategoriler: BloggerSiteniz İçin

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" 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 @frknzdn

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.

Paylaş
Yazar
Furkan Özden @frknzdn
Etiketler: CSS

Son Gönderiler

Dying Light (2015) Oyun İncelemesi

Dying Light, 2015 yılında Techland tarafından piyasaya sürülmüş birinci şahıs açılı bir zombi oyunudur. Dying Light'ı diğer zombi oyunlarından ayıran…

2 gün önce

Google Chrome için Karanlık Mod Nasıl Etkinleştirilir?

  Google Chrome, masaüstü ve mobil cihazlar için karanlık bir moda sahiptir. Ancak etkinleştirmek beklediğiniz kadar kolay değildir. Bazı tarayıcıların…

2 hafta önce

Konuk Yazar Alırken Dikkat Edilmesi Gereken 7 Nokta

Bloğunuzda konuk yayınlarına izin vermeyi hiç düşündünüz mü? Ben her ne kadar kendi bloğumda konuk yayınlarına pek yer vermesem de…

4 hafta önce

Blog Gönderileriniz İçin Kullanabileceğiniz 5 Görsel Türü

Stok fotoğrafçılığından grafiklere, çizelgelere ve infografiklere blog gönderilerinizde göstermek için kullanabileceğiniz resim türleri çoktur. Peki hangi gönderi için hangi türü…

1 ay önce

CS:GO Bind Komutları Nasıl Kullanılır?

Counter-Strike: Global Offensive herkesin eğlenebileceği kadar basit aynı zamanda en uzman oyuncuları bile tatmin edecek kadar karmaşık bir oyundur. Oyundaki…

2 ay önce

The Conjuring Evreni Filmleri Hangi Sırayla İzlenmeli?

Conjuring ve Annabelle filmleri iki farklı sırada izlenebilir. Annabelle Comes Home'un vizyona girmesiyle birlikte The Conjuring evreni toplamda yedi filme…

2 ay önce