Bildiğiniz gibi web tasarımda ikonlar sayfanın daha düzgün anlaşılabilmesi ve tasarımın daha iyi olması açısından simgeler kullanmaktayız makalenin devamında simgelerimizi tek dosyada birleştirip kullanmayı ve avantajlarını göreceğiz.
CSS Sprite ile tüm simgelerimizi tek resim dosyasından kullanma
Öncelikle sprite kullanımının en önemli avantajlarından biride çok fazla simge kullanıyorsanız kullanıcı sayfayı ziyaret ettiğinde her simge için ayrı istekte bulunacaktır işte bu durumu engellemek 100’lerce simgenizin olduğunu düşünürsek tek dosya içerisinde sakladığımızda sayfayı kullanıcı ziyaret ettiğinde sayfada kullandığınız 100 simge için 100 istekte bulunmayıp tek istek ile işlem tamamlanacaktır ayrıca kargaşadan kurtulacak ve sürekli image yolları belirtmek zorunda kalmacayacaksınız.
Şimdi örneğimize geçerek olayı daha iyi anlamaya çalışalım. Bu örneğimizde google amcanın kendi sprite’larından birini kullanacağız.
Google Sprite
Üst resimdede gördüğünüz gibi tüm simgeler tek resimde birleştirilmiş sonradan simge ekleme durumuzda önceki simgelerin pozisyonlarını kaybetmemek adına sağ ve alt’a ekleyerek devam etmelisiniz sprite’inizi büyütmeye.
Şimdi css tarafında sprite resim dosyamız için genel bir class tanımı yapmalıyız css tarafında;
1 2 3 | .sprite{ background: #fff url('http://xahlee.info/js/i/Google_Plus_css_sprites.png') no-repeat; } |
Şimdi ise sprite içerisinde gördüğünüz g+ simgesi için bir css class oluşturuyoruz.
1 2 3 4 5 | .google{ background-position:-37px -21px; width:44px; height:44px; } |
Üstteki kodda background-position ile seçilecek simgenin pozisyonu belirtilmektedir pozisyon belirtirken simgenin sol üst noktasının pozisyonu belirtilmelidir aşağıdaki işaretlediğim yer üstteki kodda’da belirtildiği gibi x-y koordinatları olarak -37px -21px olmaktadır.
Seçim pozisyonu yukarıdaki gibi seçildikten sonra sol üst noktadan itibaren seçilecek genişlik ve yükseklik belirtilmektedir sprite içerisindeki g+ simgesinin yükseklik ve genişliği 44 piksel olduğu için google class’ında width ve height özelliklerine 44px değeri atanmıştır.
Şimdi buraya kada yazdığımız kodların sonucunu canlı olarak görelim.
Sonuç
Sprite’iniz içerisindeki simgelerin pozisyonlarını ve genişlik yükseklik değerleri ile zaman kaybetmeden alabilmek için online SpriteCow hizmetini kullanabilirsiniz.
