CSS Sprite tekniği ile küçük görsellerinizin tümüne ayrı ayrı trafik kaynağı ayırmak yerine tek seferde tüm görselleri bir görsel içerisinde sunabilirsiniz bu hem trafik hemde hız açısından olumlu sonuçlar verecektir.
CSS Sprite içerisindeki görseli çerçeve olarak kullanma
CSS Sprite tekniğinde ilgili görsele ulaşmak için backgroun-position özelliğine x-y kordinat bilgileri ve genişlik yükseklik bilgisi vererek ulaşabilmekteyiz. Bu örneğimizde Sprite içerisindeki bir çerçeve görselini div arkaplan’ına nasıl uygularız bunu göstermeye çalışacağız.
CSS Sprite tekniği ile ilgili detaylı bilgi için CSS Sprite İle Tüm Simgelerimizi Tek Resim Dosyasından Kullanma adlı makaleye gözatabilirsiniz.
Öncelikle sizlerle Sprite görselini paylaşayım
Şimdi ise sprite görseli ile ilgili örnek html ve css kodlarımıza ardından sonuç kısmındanda çıktının nasıl olduğuna gözatabilirsiniz.
