CSS Sprite Nedir? Neden ve Nasıl Uygulanır?

CSS Sprite mükemmel tasarımlar oluşturmamızı sağlayan gayet kullanışlı ve hızlı bir teknik.

Görünüşte geçiş efektleri ve görseller olsa da temelinde performans yatmaktadır. Sprite tekniğinin ilk kullanım amacı daha hızlı açılan tasarımlar oluşturmaktı. Fakat CSS3‘ün de aramıza katılışıyla CSS Sprite web geliştiricilerinin güçlü bir silahı haline geldi.

Bu makalemizde Sprite tekniğinin temeline ineceğiz. Beraberinde açıklayıcı bir örnek hazırlayacağız.

ÖRNEĞİ GÖRÜNTÜLE

Detaylandıralım

CSS Sprite hakkında söylenecekleri söyledik. Fakat yine de genel bir toparlama yapalım. Teknik CSS’in background-position değeriyle oynayarak oluşturulur ve onlarca görsel ile hazırlayabileceğimiz tasarımları sadece bir görsel ile yaratmamızı sağlar. Böylece sayfa hızı ve boyutu küçülürken tasarımın kalitesi yükselir.

Nasıl hazırlanır?

Bu makaleyi yayınlarken sitemizin sol kısmındaki sosyal ağ iconları CSS Sprite için güzel bir örnek olarak gösterilebilir. Fakat biz şimdi kendi örneğimizi hazırlıyoruz.

Photoshop aşaması

Adobe Photoshop‘un herhangi bir versiyonunu açtıktan sonra Google Görsellerden iki adet icon seçiyoruz. Burada bol bol görsel var. Ben aşağıdaki iki seçimi yaptım. İkisinin de arka planı transparan. Sizde PNG veya GIF formatındaki arka planı transparan olan görseller bulun ki onları temizlemek ile vakit kaybetmeyin. Aceleniz çok ise buradan benim hazırladığım görseli indirip bu adımı atlayabilirsiniz. Ama biz bu işlemi öğrenmenizi tavsiye ediyoruz.

Şimdi bu görselleri Sprite tekniğiyle yeniden tasarlayacağız. Basketbol topu ve notanın boyutları 30×30. Yani toplamda genişliğim 60 piksel, yükseliğim ise 30 piksel.

Bu iconların üzerine gelindiğinde renklerini değiştireceğim dolayısıyla bir kopya oluşturmam gerekiyor. Yani 2 adet olan icon sayım tasarımda 4 adet olacak, üstte 2, altta 2 olmak üzere. O zaman genişlik ile hiç oynamadan yüksekliği 2 katına çıkaracağım.

Yani toplamda 60 piksel olan genişlik olduğu gibi kalacak, yükseklik ise 2 katına çıkarak 60 olacak. Ve aşağıdaki gibi bir görüntü oluşacak.

Bu işlemi yaparken

• View > Extras,
• View > Rulers,
• View > Snap,
• View > Snap > Guides, Layers, Document Bounds,
• View > Guides, Smart Guides

alanlarını açın ki kaydırma yapmadan çalışabilesiniz. Bakın çalışırken rehber çizgiler bize ne kadar yardımcı olabiliyor.

Şimdi alttaki basketbol topu ve notayı renklendirelim. Bu işlemi yapmanın birçok yolu var. İstediğiniz yöntemi kullanabilirsiniz. Photoshop ile renklendirme yapmakta sorun yaşıyorsanız beni izleyin;

İlk olarak alttaki iconların layerlarını faremizin sağ tuşuyla tıklıyoruz ve Blending Options alanına gidiyoruz.

Açılan pencerede Color Overlay alanına gidin ve renklendirme işleminizi tamamlayın. Aynı işlemi alttaki Nota iconu için de yapın. Aşağıdakine benzer bir sonuç elde edeceksiniz.

Örnek tasarımımız hazır. Photoshop ile işimiz burada bitiyor. Sırada CSS var.

CSS aşaması

Şimdi toplamda 4 adet icon içeren görseli parçalara ayıracaz. Ben <li> kodu ile tasarımımı hazırlayacağım. Yanyana iki adet <li> olacak ve üzerlerine gelince güzel bir geçiş görüntüsü oluşacak. Bir iconumun boyutu 30×30 piksel olduğu için her bir <li> tasarımının boyutu da 30×30 olacak.

<li> tasarımıyla başlayalım.

Aşağıdaki list-style:none satırlarımızın yanında başlık objesi çıkmasını engelleyecek, float:left iconların sola yaslanmasını sağlayacak, transition kodları ise geçişlerimizi daha kaliteli kılacak.

.sprite li{
list-style:none;
width:30px;
height:30px;
background-image:url(css-sprite-icons.png);
float:left;
transition : background 0.5s;
-webkit-transition: background 0.5s;
-moz-transition: background 0.5s;
-o-transition:background 0.5s;
}

Şimdi iconlarımızın her biri için ayrı <li> tasarımları yapıyoruz. Background-position‘ı daha önce detaylıca anlatmıştık. Göz atmanızı öneririz.

.basketbol{background-position:0 0; }
.nota{background-position:30px 0;}

Ve bu <li> lerin üzerine gelince yapılacak düzenlemeyi belirtiyoruz.

.basketbol:hover{background-position:0 30px;}
.nota:hover{background-position:30px 30px;}

Böylece CSS ile de işimiz bitiyor. Sırada HTML var.

HTML aşaması

En kolay kısma geldik. Şimdi tasarlanmış arayüze şekil vereceğiz. Bir adet <ul>, içerisine de 2 icon için 2 adet <li> oluşturacağız.

HTML kodlarımız da bu kadar. An itibariyle CSS Sprite tasarımımız hazır.

Sonuç