a
Kadir KILIÇ
7 ay önce 0 Yorum

Css Sprite Kullanımı

Css Sprite sitenizi hızlandırma konusunda size çok yardımı dokunacaktır, neden kullanılır sorusuna; birden fazla resim kullanmak yerine tüm resimleri tek bir resimde birleştirerek sitemizin açılma süresini kısaltabiliriz, artık bu işlemi internet sitelerinden basitçe yapabiliriz.

  • http://css-sprit.es/
  • http://www.spritecow.com/
  • http://www.tr.spritegen.website-performance.org/

Google’a “Css Sprite” yazdığınızda bu siteler gibi birçok site çıkacaktır, bunun haricinizde işlemi manuel olarak yapmak isterseniz makalemizin devamını okumalısınız.

Örnek olarak ise aşağıda şöyle küçük bir çalışma yaptık;

Bu resimde toplam 6 resim olduğunu varsayalım bunlar mesala 1 logo 5 sosyal ağ ikonları vb. şeyler olabilir, ilk olarak birinci resmimize “.bir” classını tanımladım, birinci resimde sadece width ve height değerleri verdik çünkü resimin pozisyonu en sol en üste olduğu için gerek yok.

.bir{
width: 72px;
height: 72px;
background: url(https://kodist.net/wp-content/uploads/2017/02/css-sprite-ornek.png) no-repeat;
}

İkinci resimde öyle olmayacak çünkü resimizin pozisyonu farklı bir yerde olduğu için “background-position: ” ile düzenleme yapabiliriz, -76px vermemin sebebi ikinci resim soldan -76px sonra olduğu için daha sonra 0px vermemin sebebi ise en üste olduğu için.

.iki{
width: 72px;
height: 72px;
background: url(https://kodist.net/wp-content/uploads/2017/02/css-sprite-ornek.png) no-repeat;
background-position: -76px 0px; // bu kısım ikinci resimin pozisyonu
}

Ekran çıktısı ise aşağıdaki şekilde olacaktır, diğer resimlerde ise “background-position: ” ve “width, height” değerlerini değiştirerek kullanabiliriz.

Css Sprite Kullanımı için Yorumlar