Apa itu CSS Sprite dan Contohnya
Istilah "sprite" muncul
sebenarnya untuk istilah pemograman game zaman dulu, mereka meloading banyak
image dalam 1 file, kemudian dengan memanfaatkan pengaturan background position
gambar yang ditampilkan berubah-ubah, hal ini guna menghemat memori dan supaya
tidak sering loading. Nah dalam teknik desain website kita juga bisa
mengimplementasikan hal ini, namanya CSS sprite. Biasa CSS sprite dibuat
untuk tombol atau gambar animasi yang jika mousenya berada di atas, maka gambar
tombol akan berubah. Dengan teknik CSS biasa, biasanya kita membuat 2 buah file
image, yang dengan bantuan javascript kita ubah source gambarnya jika pointer
mouse berada di atas objek. Tapi dengan CSS sprite cukup 1 file image
Contoh
CSS Sprite
Mungkin anda pernah melihat website
menu atau tombol suatu website yang berubah jika kita taruh pointer mouse di
atas, tetapi ketika kita save page as gambar-gambar tombolnya hanya berada
dalam 1 file, seperti situs apple, facebook dan lainnya (contoh file image menu
apple.com).
Untuk lebih mengerti perhatikan contoh
sederharna CSS sprite berikut:
Jika anda taruh pointer mouse di
atas, maka gambarnya akan berubah. Nah jika menggunakan teknik CSS sprite, kita
cukup membutuhkan 1 file image seperti di bawah:
Kemudian dengan CSS kita atur supaya
pas mouse di atas yang ditampilkan berubah. CSS yang digunakan adalah:
background-image: url(bg.gif);
background-position: [horizontal position] [vertical position];
Kode
CSS Sprite
Berikut adalah kode untuk contoh kode
CSS sprite di atas
<style>
#menu-desrizal{
width:91px;
height:25px;
text-decoration:none;
display:block;
background-image:url(gambar/desrizal-css-sprite.jpg);
background-position:0 0;
}
#menu-desrizal:hover{
background-position:0 -25; }
</style>
<a
id="menu-desrizal"
href="http://www.desrizal.com"></a>
Penjelasan:
Kita punya tombol menu link, kita atur tombolnya berukuran 91x 25 pixel,
kemudian kita beri latar belakang gambar.
Jika hover (pointer mouse berada di atas) mala kita atur posisi backgroundnya
untuk menampilkan tulisan desrizal bagian bawah.
