CSS Sprite Tekniği

Selamlar;

Bu yazımda benim çok hoşuma giden Css Sprite tekniğinden bahsetmek istiyorum.

Diyelimki web sayfamızda bir butonumuz var ve mouse ile üzerine geldiğimizde buton üzerindeki resmin değişmesini istiyoruz.

Bunun bir çok alternatifi var tabikide ama sprite tekniği bize en güzel sonucu vermekte.

Asıl amaç sayfada bulunan tüm görsel öğeleri bir resim dosyasında toplayıp tüm görsellerin bir kerede yüklenmesi.

Siyah-beyaz olan sosyal ağlar logolarının üstüne gelince renklendirelim.

Tüm istediğimiz görselleri bir karede toplamak için photoshop veya benzeri bir program kullanırdık ve hizalamak işin en önemli kısmıydı. Ama artık Css Sprite Generator diye bir site bu işi bizim için yapıyor.

Tüm görsellerimizi tek tek hazırladıktan sonra hepsini bir .zip klasörüne kopyalıyoruz.

Ardından http://tr.spritegen.website-performance.org/ sayfasına girerek oluşturduğumuz zip dosyasını yüklüyoruz. Zip dosyasını seçtikten sonra aşağıdaki parametreleri değiştirmemize gerek yok sadece dikey aralık parametresini 1 olarak değiştrebiliriz. Buda resimler arası 1px boşluk olması için. Diğer türlü resmimiz gereksiz büyük olabiliyor.

Ziplediğimiz dosyayı yükledikten sonra en
altta tümleşik resim dosyasını ve css kodlarını üret butonuna basıyoruz.



Ve böyle bir ekran geliyor. Aşağıda Tümleşik Resim Dosyanızı indirin butonuna basarak birleşik resim dosyasını indiriyoruz.

Css kodlarımız da hazır olarak geliyor.

 

 

 

 

 

Benim resmim şu şekilde oldu;

Bu aşamadan sonra Css kodlarında ufak değişiklikler yapmamız gerekiyor.

Asıl amaç siyah beyaz olan logoya gelince renklenmesi. Bunun için 3 adet div oluşturuyoruz. Ve classlarına isim veriyoruz.

<div class=”face”></div>
<div class=”twitter“></div>
<div class=”linked”></div>
Şimdi de cssimizi düzenleyelim. Bize verilen css sadece background positionları içeriyor. Biz her bloğa şu 2 satırı ekliyoruz.
background-image: url(‘ResimURL.png’);
background-repeat: no-repeat;
Ve şu çok önemli oluşturduğumuz divlerin classları ile css classları aynı olmalı. Tabi mouse ile üstüne gelince değişicek classlara :hover tagini eklemeyi unutmuyoruz.
Benim cssim şu şekilde olmuş oldu: (Tabii sayfama göre ufak tefek css ekledim.)
.face:hover
{
background-position:
0 0;
width: 48px;
height: 48px;
float: left;
margin-right:
7px;
background-image: url(‘ResimURL.png’);
background-repeat: no-repeat;
}
.face
{
background-position:
-49px 0;
width: 48px;
height: 48px;
float: left;
margin-right:
7px;
background-image: url(‘ResimURL.png’);
background-repeat: no-repeat;
}
.linked:hover
{
background-position:
-98px 0;
width: 48px;
height: 48px;
float: left;
background-image: url(‘ResimURL.png’);
background-repeat: no-repeat;
}
.linked
{
background-position:
-147px 0;
width: 48px;
height: 48px;
float: left;
background-image: url(‘ResimURL.png’);
background-repeat: no-repeat;
}
.twitter:hover
{
background-position:
-196px 0;
width: 48px;
height: 48px;
float: left;
margin-right:
7px;
background-image: url(‘ResimURL.png’);
background-repeat: no-repeat;
}
.twitter
{
background-position:
-245px 0;
width: 48px;
height: 48px;
float: left;
margin-right:
7px;
background-image: url(‘ResimURL.png’);
background-repeat: no-repeat;
}
Esas amaç css ile background-positonları değiştirerek yüklediğimiz tek resmi farklı resimlermiş gibi yayınlamak. Umarım faydalı olmuştur. Takıldığınız bir noktada sormaktan çekinmeyin.
Reklamlar

6 comments on “CSS Sprite Tekniği

  1. üstat sormak isteiğim konu şu, bu css sprite background-repeat: no-repeat;
    olarakmı kullanabiliriz sadece, repeat-x ve repeat-y, veya bottom right gini öğelerle kullanmazmıyız.Hayır ben denedim olmadı:d Ama haberturk sitesinde böyle bir uygulama var ve çalıştırmışlar.Bu repeat olayını nasıl çözeriz.
    Şimdiden teşekkürler

Bir Cevap Yazın

Aşağıya bilgilerinizi girin veya oturum açmak için bir simgeye tıklayın:

WordPress.com Logosu

WordPress.com hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Twitter resmi

Twitter hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Facebook fotoğrafı

Facebook hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Google+ fotoğrafı

Google+ hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Connecting to %s