CSS Sprite Tekniği

İnternet standartlarının yükselişi ile CSS, yeni bir soluk getirdi hem kullanıcılara hem de programcılara. Son dönemin de yeni soluğu Sprite CSS yine hem kullanıcı açısından hem de site yöneticileri açısından pek çok avantajı beraberinde getirdi. Makalemizde Sprite CSS’in ne olduğuna, kullanıcılara, site yöneticilerine ve programcılara ne gibi avantajlar sağladığına ve Sprite CSS’in nasıl oluşturulacağına dilim döndüğünce değinmeye çalışacağım. Aslında makaleyi kendi adıma unutmamak için yazdığımı da belirtmek isterim (:

CSS Sprite Nedir?

Bir projeyi tasarlarken her bölümün imajlarını yani resimlerini butona hatta ikonlara inene kadar tek tek ayırırır ve kodlamasını da yine her bölüme ayrı resim çağırarak yaparız. Sprite ise düzgün bir biçimde yerleştirilmiş tek bir resim üzerinden tüm resimlerin göreini yapmamıza yardımcı oluyor.

Sanırım bu kısım biraz karşık oldu, biraz daha açmakta fayda var. Blogumun üst navigasyon (anasayfa/hakkımda…) menüsüne baktığımız zaman hepsinin ayrı bir resim olduğunu yine resimlerin üzerine geldiğimiz zaman yeni bir resmin çağrıldığını görmek mümkün. CSS Sprite yöntemine göreyse menü öğelerinin tüm resimlerini tek bir resimde toplayıp her seferinde yeni resim kullanmak yerine bir resim ile işimizi halletmiş oluyoruz. Yani sıkıştırmış oluyoruz.

CSS SPrite Tekniğinin Avantajları Nedir?

CSS kodlamacıları için avantajlarına değinelim ilk olarak. Normal tekniğe göre kod yazan kişiler birden fazla resimle çalışır. Komplike bir sistem olduğu zaman alıp başını gittiği durumlar da cabası. CSS Sprite ile durum tam tersi. O kadar fazla resim dosyası yerine birkaç tane resim dosyası ile çalışacaktır. Bu da daha az karışıklığa yol açacaktır.

Site yöneticisi de elbette çeşitli avantajlara sahip olacaktır. Birçok resmin birkaç kere yüklenmesinin önüne geçilerek sistem tüketiminden haliyle maliyetler biraz kısılacaktır. Sitenin yüklenmesi daha hızlı olacaktır.

Ziyaretçi de üzerine geldiği butonun a:hover konumuna gelmesi için beklemeyecek, butonlar diğer nesneler hemen yüklenecektir.

CSS Sprite Oluşturma

CSS Sprite için ilk önce kodlayacağımız alanları kendimize göre bölümlemek daha doğru olacaktır. Yani, navigasyon için ayrı bir sprite resim, içerik bölümü için ayrı, yan menüler için ayrı bir resim oluşturarak bölümlere ayırmak daha mantıklıdır. Resimleri kendimiz birleştirebiliriz ancak hatalar olmaması için yardımcı yazılımlardan medet ummak da işimizi kolaylaştıracaktır.

Şimdi ilk adımı atıp sanki normal tekniğe göre kodlama yapacakmış gibi resimlerimizi bölelim. Sonrasında kullanacağımız resimleri “zip” formatında sıkıştırıp CSS Sprite Generator‘a yüklüyoruz. Servis bize sprite resmimizi, sprite resim üzerindeki öğelerin kodlamamızı oldukça kolaylaştıracak biçimde konumlarını liste halinde bize veriyor. Şimdi tek iş kodlamaya kaldı.

CSS SPrite Kodlama

Bu kısmı kendim anlatmak yerine kendimin de kaynak olarak aldığım Web Deneyimleri’ne alayım sizleri. Videolu anlatım ile daha da pekiştirmiş olacağız.

CSS Sprite makalemizin sonuna geldik. Umarım faydalı olmuştur. Sorularınızı ister yorumlarda, ister iletişim formunda bana iletebilirsiniz. Başka bir makalede buluşmak üzere, hoşçakalın.


13 Responses to “CSS Sprite Tekniği”
  1. fatih 30.4.2009
  2. Hakan 1.5.2009
  3. Hamdi Yaman 1.5.2009
  4. Hakan 1.5.2009
  5. Hamdi Yaman 1.5.2009
  6. Şeref AKYÜZ 30.9.2011
  7. Batuhan Küçükali 23.11.2011
  8. Sezer Pamukçu 17.4.2012
  9. online mutfak 20.7.2012
  10. pislink.com 17.9.2012
  11. bayram namazı 23.10.2012
  12. OnlineFilmci 13.2.2013
  13. sanayi mutfak 9.1.2017

Söz Sende

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir