CSS Sprite nasıl yapılır?

Sprite özetle; örneğin tüm resimlerin aynı tek parça png dosyası üzerinde olması ve pozisyon belirtilerek, tasarım üzerinde gereken yerlere buradan gösterilmesidir. Fakat zahmetli ve problemli bir yöntemdir ve bence gereksizdir. Artık sitelerde çok az resim kullanılıyor. İkonlar bile kod ile ekleniyor. Uğraşmaya değmez açıkçası.

Css Sprite çok gerekli ve uygulaması çok kolaydır.

Örnek referansımdan sprite.

Burada da siteyi görebilirsiniz.

Kullanımı şu şekilde örnekleyebiliriz.

şeklinde bir div alanımız olsun. Bizim çizdiğimiz tema dosyasında logomuz 300x100 px değerlerinde olduğunu varsayalım.

Stil dosyamız şuna benzeyecektir.

#logo{
width:300px;
height:100px;
background:url(tema.png) 300px 100px;
}

@Grapixa arkadaşımız gereksiz demiş fakat yanlış düşünüyor. Çoğu popüler site element çöplüğünden ve sorgu yoğunluğundan kurtulmak için bu yöntemi kullanıyor. Bütün seo araçlarında da bu yöntemin kullanılması öngörülmüştür.

Bu kendi görüşümdür.Yeni trend sitelerde sizin gösterdiğiniz örnekteki gibi sırf imaj menü arkaplanları ve kaba gölgeler yok. Dünya tasarım trendine yön veren Themeforest'taki çalışmalar örnektir. Seo açısından da uygun olmayan bir durum. Artık tasarımlar css renk uygulamaları ve kod tabanlı ikonlar ile yapılıyor. Böylelikle hem daha hızlı açılıyor hem de sprite gibi problemli uygulamalar ile uğraşılmamış olunuyor.