Css Sprite Tekniği

Google’ın yeni değer yargıları doğrultusunda yeni yeni kıymeti bilinmeye başlanılan fakat uzun süredir var olan bir teknikten bahsetmek, bilmeyenleri bu teknikle tanıştırmak istiyorum: Css Sprite

Öncelikle bilmeliyiz ki bu mucizevi veya karmaşık bir yöntem değil, bilakis hayatımızı kolaylaştıran, kodumuzu düzgün yazmaya bizi yönlendiren ve en önemlisi veri trafiğinde dosya (görsel) alış verişini minimum’da tutmamıza yardımcı olan bir yöntem.

Fon görsellerinde (background image) ve fona yedirilmiş görsel öğelerde son derece işe yarayan Css Sprite ilk olarak, Yahoo’nun 2008’de yayına aldığı bir tasarım değişikliğinde dikkatimi çekmişti. Menüsündeki tüm küçük ikonları tek bir .gif dosyaya almış ve gerekli olan yerde soldan bir padding vererek fon resmi olarak istediği görselin, bahsettiğimiz tek .gif dosyasındaki koordinatlarını göstererek basmasıydı.

Bu uzun cümle kafanızı karıştırdıysa bir örnekle devam edelim:

İnternetteki çoğu örnek menülerden gittiğinden biz de öyle yapalım. Diyelim ki 5 öğeden oluşan bir menümüz olacak ve her maddenin yanında kendisiyle ilgili farklı bir ikon göstermek istiyoruz:

Yanda gördiğiniz görselimizdeki ikonları en efektif şekilde menümüzde kullanmak için en basitinden şuna benzer bir kod işimizi görecektir:

.menu_img {background:url(/images/menu-sprite.gif) no-repeat;}
.cam {background-position:0px 0px; padding-left:33px}
.film {background-position:0px -48px; padding-left:33px}
.mix {background-position:0px -97px; padding-left:33px}
.mes {background-position:0px -151px; padding-left:33px}
.play {background-position:0px -193px; padding-left:33px}

Yani; kullanacağımız görselin sol üst noktasının koordinatlarını verip buradan sonrasını fonda kullan diyoruz. Kullanacağımız alanın yükseklik ve genişliğini başka değerlerle kontrol edebileceğimizden -ve etmemiz gerektiğinden- ötürü de görselin istemediğimiz bölgelerindeki diğer alt görseller, ilgilendiğimiz noktalarda görünmüyor.

Kullanacağımız kod da Html tarafında şunun gibi olabilir:

<div class="menu_img cam">Kamera arkası</div>
<div class="menu_img film">Filmler</div>
<div class="menu_img Mix">Mix</div>
<div class="menu_img Mes">Ölçümler</div>
<div class="menu_img play">Oynatıcı</div>

Dikkat edilmesi gereken bir diğer nokta da korrdinatlarda – (eksi) değer kullanmamız. Bunun sebebi, 0px 0px, yani sıfıra sıfır noktamızın, görselimizin sol üst noktası olması. Biz görsel içindeki herhangi bir noktayı Css’i kullanarak o <div> , <td> veya <ul> alanı için sıfıra sıfır kabul ettiriyoruz. Önce X (yatay) sonra Y (dikey) değer girerek anlık sıfıra sıfır (0,0) noktamızı belirliyoruz.

Sonunda her şeyi doğru yaptıysak elimizde yandaki gibi bir menü olacak. tabii fontlar, renkler, yükseklikler ve biraz daha güzelleştirilmiş bir css koduyla ;)

Birkaç deneme de şimdi siz yapın ve Css Sprite’ın nerelere gidebileceğini kendiniz keşfedin ;) Css Sprite benim de son dönemde keyifle uğraştığım ve sitelerimde performans artışı sağladığım güzel bir teknik. Çok az bir photoshop bilgisiyle üstesinden gelebileceğiniz bu yöntemden eminim siz de en az benim kadar keyif alacaksınız.

Herkese keyifli kodlamalar…

İşte size birkaç link:

http://www.alistapart.com/articles/sprites
http://websitetips.com/articles/css/sprites/
http://css-tricks.com/css-sprites/

Ve bir de video: http://css-tricks.com/video-screencasts/43-how-to-use-css-sprites/

Beğendiniz mi?

2 yorum

  1. Sedat Kumcu   •  

    Evet bende yaklaşık 1 yıldır bu tekniği sıkça kullanıyorum. Çok faydalı bir teknik bence. Teşekkürler.

  2. özgül   •  

    Her zamanki gibi çok yararlı bir yazı. Teşekkürler.

AKLINIZDAKİLERİ PAYLAŞIN, SORU SORUN veya YORUM YAZIN