Merhaba,

Bu dersimizde sprites komutu kullanarak resimleri belirlediğimiz px büyüklüğünde bölme işlemini gerçekleştireceğiz. Genelde resimler kullanılırken photoshop gibi resim editleme uygulamaları kullanılarak en başta bölünür ve bu şekilde kullanılır ancak css sistemi bize px büyüklükleri ve kordinatları bilinen resimlerde dilediğimiz gibi bölme yapabilmemiz için bir kolaylık sağlamaktadır.

Bu özellik pek bilinen bir özellik olmadığından örneğimi detaylı bir şekilde anlatacağım.

Kullanım şekli ;

Bir resim dosyası bulalım. Google üzerinden icon diye aratıp çıkan resimlerden biri üzerinde çalışacağım. Umarım resimin sahibi bize kızmaz.

İlk olarak style içerisinde iki adet tanımlama yapalım. İlkinin adına işlem verdim. Zira linkten çekeceğimiz icon 4 işlemi simgeliyor.  İkinciside open olsun onda da open yazıyor J

Yukarıda oluşturduğumuz width ve heigth ler orjinal resmimizden ne kadarlık bir kısım alacağımızı belirler. Biz şimdi 70*70 lik bir alan alıyoruz.

Backgroundun en sonundaki iki parametre ise orjinal resmimizin x ve y kordinatlarını belirtir ve top – left e göre hareket eder. Bu kordinatlar resmin sizlarına göre hesaplanmakta ve sonsuz olarak dönmektedir. Örn : resim 400 e 400 ise biz kordinat olarak 500 e 500 verirsek resmin 100 e 100 kordinatını almış oluruz. Şimdide img elementimize classlarımızı ekleyelim.

İyi Günler Dilerim