Apa css sprite dan bagaimana membuatnya

CSS sprite adalah sebuah teknik menampilkan gambar di halaman web atau blog dengan cara mengkombinasikan beberapa gambar dalam satu file, kemudian memanggilnya melalui css dengan cara menuliskan posisi titik x dan titik y sesuai gambar yang dibuat.

Dengan menggunakan teknik css sprite ini, loading halaman web atau blog lebih cepat, trus juga meminimalkan http request karna yang diambil cuman 1 file. Menurut informasi yang saya baca,  teknik ini adalah cara efektif dalam menampilkan gambar-gambar kecil seperti menu. Saya sudah coba terapkan di web saya ini (liat bagian info artikel gambar tanggal, penulis dll), css sprite ini juga sudah banyak diterapkan pada banyak situs diinternet.

contoh css sprite

Bagaimana membuat css sprite?

Pertama yang anda lakukan adalah menyiapkan gambar-gambar yang akan digabungkan menjadi 1 file. Jika belum ada anda bisa cari yang gratis diinternet seperti :

  1. http://www.iconspedia.com
  2. http://www.freeiconsdownload.com
  3. http://www.findicons.com

Untuk menggabungnya anda bisa gunakan editor grafis seperti photoshop, gimp atau yang lainya. Jangan lupa menyimpanya sebaiknya dalam format gif atau png atau jpg. Saya pribadi menganjurkan dalam format PNG karena mendukung transparan.

Jika anda ingin cara instan sekarang sudah banyak tersedia tool gratis yang bisa digunakan secara online seperti :

  1. http://css-sprit.es/
  2. http://spritegen.website-performance.org/
  3. http://www.spritecow.com/
  4. http://csssprites.com/

Misal hasil penggabungan gambarnya seperti berikut :

Contoh hasil css sprite

Masing-masing bagian gambar berukuran 64pixel, sehingga kalo total lebar gambar adalah 256pixel. Anda juga bisa gabungkan gambar secara vertikal sehingga hasil tinggi gambar total 256px. Cara memanggilnya sedikit berbeda pada titik x dan y-nya.

Bagaimana jika ingin menampilkanya satu persatu, caranya lihat kode css berikut :

<style type="text/css">
.img-1,.img-2,.img-3,.img-4 {
   width: 64px; height: 64px;
}
.img-1 { 
   background: url('hasil-css-sprite.png') no-repeat 0px 0px; 
}
.img-2 { 
   background: url('hasil-css-sprite.png') no-repeat -64px 0px; 
}
.img-3 { 
   background: url('hasil-css-sprite.png') no-repeat -128px 0px; 
}
.img-4 { 
   background: url('hasil-css-sprite.png') no-repeat -192px 0px; 
}
</style>

Kode css diatas melakukan pentuan posisi sesuai bidang gambar yang kita buat. Jika posisi pada paling kiri berarti nilai x = 0px, agak bergeser kekanan nilai x=-64px dan seterusnya. Semua titik hanya mengarah ke satu gambar yang sama dengan posisi x dan y berbeda.

Jika gambar vertikal kebawah berarti yang berubah adalah titik y.

Setelah kode css selesai, kemudian buat kode html seperti berikut :

<div class="img-1"></div>
<div class="img-2"></div>
<div class="img-3"></div>
<div class="img-4"></div>

Kode diatas memanggil komponen gambar yang sudah kita atur dalam css, masing-masing ditunjukkan dengan nama class yang sudah dibuat.

Hasilnya :

 
 
 
 

Beberapa sumber yang membahas tentang css sprite :

  1. http://css-tricks.com/css-sprites/
  2. http://moovindesigns.blogspot.com/2011/05/planting-css-sprites_24.html
  3. http://freewebtipsandtrick.blogspot.com/2011/02/css-sprites-what-they-are-and-how-to.html
  4. http://skyje.com/css-sprites/

Jika masih binggung atau ada koreksi silahkan kirim kementar pada bagian bawah artikel ini.

Semoga bermanfaat

Zainal Hakim

** Bebas disunting dengan menyebutkan sumber **

Komentar

Halaman Lainya

  • Membuat header table pada tiap halaman cetak
    Format cetak laporan yang baik tentunya sangatlah penting dalam membuat sebuah aplikasi berbasi web. Biasanya laporan yang menampilkan banyak record disajikan dalam bentuk tabel dengan judul kolom berbeda.
  • Mengatur paragraf dengan css
    Paragraf secara mendasar diartikan sebagai kumpulan kalimat yang memiliki ide atau pokok bahasan yang sama. Dalam penulisannya paragraf biasanya terdiri dari susunan kata-kata yang terhubung secara logis untuk menjelaskan suatu topik atau ide. Kali ini saya tidak membahas bagaimana membuat paragraf atau cara menulis paragraf, tapi saya akan membahas bagaimana menyusun tampilan sebuah paragraf html dengan css.
  • Mengatur format tabel dengan css
    Anda mungkin sudah tidak asing lagi dengan css, yang umumnya digunakan untuk mengatur layout halaman web. Berikut ini saya akan berbagi tentang bagaimana mengatur format tabel dengan css. Pengaturan format tabel yang akan kita lakukan adalah mengganti warna tabel dan jenis tulisan pada tiap cell tabel. SIlahkan simak berikut ini..
  • Software gratis editor css
    Untuk membuat sebuah halaman web yang rumit dan menarik tentunya memerlukan kode perintah css yang lumayan banyak pula, oleh karena itu diperlukan perangkat lunak bantu yang dapat mempermudah penyusunan serta memvisualisasikan kode css yang kita buat.
  • Membuat menu dropdown dengan css
    Membuat dropdown menu dengan css. Banyak sekali variasi menu web/blog yang bisa dibuat dengan css, ada bentuk menu tulisan maupun gambar biasa, dan ada juga bentuk-bentuk menu dropdown/menu bercabang secara horizontal atau vertikal. Pembuatanya juga bervariasi, ada yang menggunakan javascript, ada juga menggunakan jquery, bahkan ada yang membuat menu dari flash. Pada tulisan ini anda akan mengetahui bagaimana cara membuat menu dropdown horizontal murni dibuat dengan css. Silahkan anda simak.

Kiriman terbaru