Sprite Gambar CSS


Sprite gambar adalah kumpulan gambar yang dimasukkan ke dalam satu gambar.

Halaman web dengan banyak gambar bisa memakan waktu lama untuk dimuat dan menghasilkan beberapa permintaan server.

Menggunakan sprite gambar akan mengurangi jumlah permintaan server dan menghemat bandwidth.


Contoh Sederhana

Daripada menggunakan tiga gambar terpisah, kita gunakan gambar tunggal ini ("img_navsprites.gif"):

Dengan CSS, kita dapat menampilkan hanya bagian dari gambar yang kita butuhkan.

Dalam contoh berikut, CSS menentukan bagian mana dari gambar "img_navsprites.gif" yang akan ditampilkan.

Contoh

#home {
  width: 46px;
  height: 44px;
  background: url(img_navsprites.gif) 0 0;
}

Penjelasan contoh:

  • <img id="home" src="img_trans.gif"> - Hanya mendefinisikan gambar transparan kecil karena atribut src tidak boleh kosong. Gambar yang ditampilkan akan menjadi gambar background yang kita tentukan di CSS
  • width: 46px; height: 44px; - Menentukan bagian gambar yang ingin kita gunakan
  • background: url(img_navsprites.gif) 0 0; - Mendefinisikan gambar background dan posisinya (kiri 0px, atas 0px)

Ini adalah cara termudah untuk menggunakan sprite gambar, sekarang kita perluas kegunaannya dengan menggunakan link dan efek hover.


Membuat Daftar Navigasi

Kita akan menggunakan gambar sprite ("img_navsprites.gif") untuk membuat daftar navigasi.

Kita akan menggunakan daftar HTML, karena dapat berupa link dan juga mendukung gambar background.

Contoh

#navlist {
  position: relative;
}

#navlist li {
  margin: 0;
  padding: 0;
  list-style: none;
  position: absolute;
  top: 0;
}

#navlist li, #navlist a {
  height: 44px;
  display: block;
}

#home {
  left: 0px;
  width: 46px;
  background: url('img_navsprites.gif') 0 0;
}

#prev {
  left: 63px;
  width: 43px;
  background: url('img_navsprites.gif') -47px 0;
}

#next {
  left: 129px;
  width: 43px;
  background: url('img_navsprites.gif') -91px 0;
}

Penjelasan contoh:

  • #navlist {position:relative;} - posisi diatur ke relatif untuk memungkinkan pemosisian absolut di dalamnya
  • #navlist li {margin:0;padding:0;list-style:none;position:absolute;top:0;} - margin dan padding diset ke 0, list-style dihapus, dan semua list item diposisikan secara absolut
  • #navlist li, #navlist a {height:44px;display:block;} - tinggi semua gambar adalah 44px

Sekarang mulai posisi dan style untuk setiap bagian tertentu:

  • #home {left:0px;width:46px;} - Diposisikan sepenuhnya ke kiri, dan lebar gambar adalah 46px
  • #home {background:url(img_navsprites.gif) 0 0;} - Mendefinisikan gambar background dan posisinya (kiri 0px, 0px atas)
  • #prev {left:63px;width:43px;} - Diposisikan 63px ke kanan (#home width 46px + beberapa ruang ekstra di antara item), dan lebarnya adalah 43px.
  • #prev {background:url('img_navsprites.gif') -47px 0;} - Mendefinisikan gambar background 47px ke kanan (#home width 46px + 1px line divider)
  • #next {left:129px;width:43px;}- Diposisikan 129px ke kanan (awal dari #prev adalah 63px + lebar #prev 43px + spasi ekstra), dan lebarnya adalah 43px.
  • #next {background:url('img_navsprites.gif') -91px 0;} - Mendefinisikan gambar backgorund 91px ke kanan (#home width 46px + 1px line divider + #prev width 43px + 1px line divider )

Efek Hover

Sekarang kita ingin menambahkan efek hover ke daftar navigasi kita.

Tips: Selector :hover dapat digunakan pada semua elemen, tidak hanya pada link.

Gambar baru ini ("img_navsprites_hover.gif") berisi tiga gambar navigasi dan tiga gambar yang digunakan untuk efek hover.

Karena ini adalah satu gambar tunggal sebenarnya, dan bukan enam file terpisah, tidak akan ada delay loading saat pengguna mengarahkan kursor ke gambar.

Disini kita hanya menambahkan tiga baris kode untuk menambahkan efek hover.

Contoh

#home a:hover {
  background: url('img_navsprites_hover.gif') 0 -45px;
}

#prev a:hover {
  background: url('img_navsprites_hover.gif') -47px -45px;
}

#next a:hover {
  background: url('img_navsprites_hover.gif') -91px -45px;
}

Penjelasan contoh:

  • #home a:hover {background: url('img_navsprites_hover.gif') 0 -45px;} - Untuk ketiga gambar hover, kita tentukan posisi background yang sama, hanya 45px lebih jauh ke bawah

Sumber referensi: w3schools

Komentar

Posting Komentar