CSS Sprite Nasıl Yapılır?

Ekim 2011
YouTube'ta Takip Et

İnternet standartlarının ve CSS’in gelişmesi, sağladığı kolaylıklar, programcılara özellikle hız ve düzen konusunda birçok avantaj sağlıyor. CSS Sprite, web sitenizde kullandığınız küçük çaplı görselleri ve ikonları parça parça çağırmak yerine bütün görsellerin bir arada bulunduğu tek bir görsel üzerinden koordinat belirleyerek çağırmamıza yarayan, sitenin yüklenme hızını olumlu anlamda etkileyen bir sistem.

CSS Sprite Tekniğinin Avantajları

CSS Sprite tekniği kullanılarak hazırlanan bir web sayfası, bu tekniği kullanmayan aynı web sayfasından daha hızlı yüklenir. Çünkü sitede 10 görsel varsa, bu da her biri için sunucuya gönderilecek 10 request demektir. CSS Sprite ile 10 görseli tek bir görsel haline getirirseniz, bu da tek bir request demek olacaktır ki, sayfanızın hızlı yüklenmesini sağlayacaktır. Google gibi büyük sitelerin çoğu CSS Sprite tekniğini kullanıyor.

CSS Sprite Nasıl Yapılır?

CSS Sprite oluşturmak için iki yol var. Bunlardan biri herbir görseli Photoshop gibi bir programla birleştirmek ve yanyana ya da altalta dizdiğiniz bu görsellerin piksel bazında koordinatlarını hesaplamak. Tahmin edeceğiniz gibi bu biraz zahmetlidi ve hata şansı olan bir yöntem. Çok dikkatli olmanız gerekiyor mükemmel sonuç almak için.

Diğer yol ise bu işlem için bir aracı kullanmak. Görsellerin herbirini ayrı ayrı imaj haline getirip, bunları online servislere yüklüyoruz. Bu servisler görselleri tek bir imaj haline getiriyor ve görsellerin CSS kodlarında kullanmak üzere koordinatlarını bize veriyor. Biz de hazır gelen CSS kodlarını sitemizde rahatça kullanabiliyoruz. CSS Sprites Generator ve Stitches kullanabileceğiniz online servislerden birkaçıdır.

CSS Sprite Kullanımı

Yukarıdaki site bize gerekli kodları verecektir, ama yine de anlatmakta fayda var. CSS Sprite tekniği ile kodlama yapmak için CSS’in background özelliği kullanıyor. Örneğin; almak istediğimiz görsel, bütün görselin yukarıdan 10 piksel aşağısında ve soldan 20 piksel solundaysa, css aşağıdaki şekilde kullanılır.

Gözden kaçırdığım veya eklemek istediğiniz bir şey olursa yorum kısmına yazabilirsiniz.