Background resimlerinde css ile parçacık kullanımı

Sayfanızda yüzlerce ikon kullanıyorsunuz ve hepsini tek tek kesmek uzun vaktinizi alıyorsa, üzülmeyin.

Bu yazıda, css ile birden çok ikon barındıran bir png dosyasını background olarak atayıp, konum olarak parçacığımızın yerini belirterek nasıl background kullanabileceğimizi göreceğiz.

Öncelikle, neyi kastettiğimi anlamak için, facebook sayfasına girin ve herhangi bir ikona sağ tıklayarak firebug vs. bir yardımcı aracılıyla elemanı seçin. (Inspect Element) Bunu yaptığınızda, şöyle bir yapı ile karşılaşacaksınız:

caps13102011.jpg

 

Bu şu anlama geliyor, sizin sayfada gördüğünüz bu ikon için facebook aslında içerisinde bir çok ikon bulunan şu dosyayı yüklüyor ve size sadece bir parçacığı içerisinden css ile seçerek gösteriyor:

Qh8uUy4sGDl.png

Peki bunu nasıl yapıyor? İşte css içerisinde yapacağımız iş burada devreye girecek.

Öncelikle şunu yapalım, tüm imajı içeren bir background stili oluşturalım:

 

.tumIkonlar
{
background-image:url('http://www.cenkebret.com/Content/files/Qh8uUy4sGDl.png')
}

Sonra, herhangi bir ikon için (ben beğen ikonunu kullanacağım) boyutunu ve background pozisyonunu içeren bir stil daha oluşturalım:

Not: background pozisyonu x koordinatı (yatay düzlem) ve y koordinatı (dikey düzlem) şeklinde veriliyor. Bunu anlamak için resmi photoshop veya benzeri bir programla açarak üstünde ne kadar solunda ne kadar boşluk var bunu tespit etmemiz gerekecek. (atadığımız imajda soldan 37px, yukarıdan 143px gidince beğen ikonumuza denk geliyoruz (tabi eksi değer olarak belirtmemiz gerekiyor):

.begenIkon
{
background-position: -37px -143px;
    height: 13px;
    width: 15px;
}

Bu işlemleri yaptıktan sonra, bu iki classı kullanan bir div oluşturduğumuzda, beğen ikonumuz hazır olacak:

<div class="tumIkonlar begenIkon"></div>

Örnekte de görebilirsiniz: 

 

Ersin Genel diyor ki:
13.10.2011 23:42:24
Faydalı içerik... Eline sağlık.
Abdurrahman IŞIK diyor ki:
28.2.2012 23:40:37
CSS'in en sevdiğim güzelliği..
Halk Tv izle diyor ki:
14.6.2013 21:17:46
Çok başarılı ve detaylı bir anlatım olmuş emeğinize sağlık.
Örümcek Adam diyor ki:
20.12.2013 09:00:48
Güzel paylaşım. Teşekkürler
Eray diyor ki:
29.12.2013 12:51:12
css sprite adınıda taşıyan bu olanak resimlerin tektek yüklenmesi yerine tek seferde daha hızlı yüklenmesini sağlıyor ve sayfa hızınızda gözle görülür hız artışı sağlıyor :) güzel anlaşılır anlatım eline sağlık

Yorum Gönder

Ad Soyad:
E-Posta:
URL:
Yorum:
© Copyright 2011 Cenk EBRET