Monday, 4 August 2014

CSS Sprite

Unknown

Monday, 4 August 2014

Pernahkah sobat mendengar teknik css sprite? Saya rasa sobat semua sudah mengenal dengan teknik css sprite ini, namun bagi sobat yang belum mengenal mari kita sama – sama belajar dan memahami bagaimana teknik dasar dari css sprite.
Sebagian besar masalah berat sebuah blog dipengaruhi dari berbagai aspek salah satunya adalah dari penggunaan images seperti problem yg terjadi di blog ini adalah emoticon yg sayang gunakan di Komentar Notif ala Google Plus, bisa anda cek di http://gtmetrix.com.

Untuk membuat CSS Sprite, yang harus diperhatikan adalah posisi gambar (background-position), ukuran gambar (width - height), dan pengulangan gambar (background-repeat). Posisi dan ukuran gambar nantinya akan menentukan peletakan gambar, sedangkan pengulangan gambar akan berpengaruh terhadap tampilan gambar yang dihasilkan. Untuk itu gunakan CSS Sprite ini pada gambar - gambar yang tidak diulang (no-repeat)

Teknik css sprite adalah tekik untuk menggabungkan beberapa images menjadi satu supaya dalam pemanggilan images hanya satu yang dipanggil meski yang digunakan adalah images yang berbeda sekaligus mengurangi permintaan http://. Secara konsep dasar seperti itu.
Berikut contoh membuat css sprite:

HTML

<div>
 <ul>
  <li class="tw"><a href="#"></a></li>
  <li class="yt"><a href="#"></a></li>
  <li class="fb"><a href="#"></a></li>
  <li class="in"><a href="#"></a></li>
 </ul>
</div>

CSS

ul li{
    float: left;
}
ul li a{
    width: 60px;
    height: 60px;
    background: url(img/icon.png) no-repeat;
    display: inline-block;
}
ul li.tw a{
    background-position: 0px 0px;
}
ul li.yt a{
    background-position: -70px 0px;
}
ul li.fb a{
    background-position: -140px 0px;
}
ul li.in a{
    background-position: -210px 0px;
}

Demo

Kesimpulan
dari code diatas penjelasan sprite terdapat pada penggunaan background yang memanggil satu image yaitu image “icon.png”. sedangkan penggunaan imagenya berbeda untuk setiap link. Pemanggilan image cuma dipanggil sekali. untuk mengatur posisi image, cuma memainkan background-position.
ada beberapa website yang menyediakan layanan untuk generator css sprite diantaranya pada situs:

dan banyak lagi website yang bisa kita gunakan untuk mempermudah membuat css sprite.