CSS Sprite Nasıl Yapılır?

İ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.

span #sprite {  background-image: url(gorsel.png);  background-position: -10px -20px;}

Popular Eğitimler

CSS Nedir ve Nasıl Kullanılır?

CSS, HTML ile kodladığımız sayfaları görsel olarak güzelleştirmemizi sağlar. CSS, evin dekoru…

cPanel ile Ücretsiz Let’s Encrypt SSL Sertifikası Kurulumu

Web sitenizin güvenliği için SSL sertifikası nasıl satın alınır? Wordpress’e ücretsiz SSL nasıl kurulur?

Geri Sayım Sayacı Kodu (HTML ve JS)

Geri sayım kodlarını genellikle yapım aşaması sayfalarında sitenin açılacağı zamanı, bir kampanyanın…

CSS Sprite Nasıl Yapılır?

İnternet standartlarının ve CSS’in gelişmesi, sağladığı kolaylıklar, programcılara özellikle hız ve düzen…

Google Web Fontları Nasıl Optimize Edilir?

Google Web Fontları, web geliştiriciler için büyük destek sağlıyor. Peki site hızına…

CSS ile Linklere Düz Çizgi Yerine Hareketli Dalgalı Çizgi

Linkler varsayılan olarak altı düz çizgili elemanlardır web sitelerinde. Kullanıcının ilgisini çekmesi…