Css Sprite Tekniği

CSS Sprite Nedir?

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

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üklenecektir. Çü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.

CSS Sprite Oluşturma

CSS Sprite oluşturmak için iki yol var. Bunlardan biri her bir görseli photoshop gibi bir programla birleştirmek ve yanyana ya da altalta dizdiğiniz bu görsellerin piksel bazında koordinatlarını hesaplamaktır. Tahmin edeceğiniz gibi bu biraz zahmetlidi ve hata şansınız vardır.

Diğer yol ise bu işlem için bir aracı kullanmak. Görsellerin herbirini ayrı ayrı imaj haline getirip, bunları zip formatında sıkıştırarak, CSS Sprite Generator‘a (CSS Tümleşik Resim Üreteci) yükleyelim. Bu servis görselleri tek bir imaj haline getirecek ve görsellerin css kodlarında kullanmak üzere koordinatlarını bize verecektir.

Bu adres ise HTML5 tekniğini kullanan başka bir oluşturucudur. Bilgisayarınızdaki resim dosyalarını sürükle bırak yöntemi ile buraya atabilir, Generate butonuna tıklayarak sağındaki Sprite ile kombine edilmiş tek bir resim dosyasını, Stylesheet ile kullanabileceğiniz css dosyasını görüntüleyebilirsiniz.

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ılır.

Ö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;}

Alıntıdır… http://sanagrafi.com/css-sprite

Bir Cevap Yazın

Aşağıya bilgilerinizi girin veya oturum açmak için bir simgeye tıklayın:

WordPress.com Logosu

WordPress.com hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

Google fotoğrafı

Google hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

Twitter resmi

Twitter hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

Facebook fotoğrafı

Facebook hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

Connecting to %s