Sprite Gambar CSS
Gambar Sprite
Sprite gambar adalah kumpulan gambar yang dimasukkan ke dalam satu gambar.
Halaman web dengan banyak gambar membutuhkan waktu lama untuk dimuat dan menghasilkan beberapa permintaan server.
Menggunakan sprite gambar akan mengurangi jumlah permintaan server dan menghemat bandwidth.
Gambar Sprite - Contoh Sederhana
Alih-alih menggunakan tiga gambar terpisah, kami menggunakan 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;
}
Contoh menjelaskan:
<img id="home" src="img_trans.gif">- Hanya mendefinisikan gambar transparan kecil karena atribut src tidak boleh kosong. Gambar yang ditampilkan akan menjadi gambar latar yang kita tentukan di CSSwidth: 46px; height: 44px;- Menentukan bagian gambar yang ingin kita gunakanbackground: url(img_navsprites.gif) 0 0;- Mendefinisikan gambar latar belakang dan posisinya (kiri 0px, 0px atas)
Ini adalah cara termudah untuk menggunakan sprite gambar, sekarang kami ingin memperluasnya dengan menggunakan tautan dan efek hover.
Gambar Sprite - Buat Daftar Navigasi
Kami ingin menggunakan gambar sprite ("img_navsprites.gif") untuk membuat daftar navigasi.
Kami akan menggunakan daftar HTML, karena dapat berupa tautan dan juga mendukung gambar latar belakang:
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;
}
Contoh menjelaskan:
- #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 disetel ke 0, gaya daftar dihapus, dan semua item daftar diposisikan secara absolut
- #navlist li, #navlist a {height:44px;display:block;} - tinggi semua gambar adalah 44px
Sekarang mulai posisi dan gaya 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 latar belakang 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 latar belakang 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 latar belakang 91px ke kanan (#home width 46px + 1px line divider + #prev width 43px + 1px line divider )
Sprite Gambar - Efek Arahkan Arah
Sekarang kita ingin menambahkan efek hover ke daftar navigasi kita.
Tip: Pemilih :hoverdapat digunakan pada semua elemen, tidak hanya pada tautan.
Gambar baru kami ("img_navsprites_hover.gif") berisi tiga gambar navigasi dan tiga gambar untuk digunakan untuk efek hover:
Karena ini adalah satu gambar tunggal, dan bukan enam file terpisah, tidak akan ada penundaan pemuatan saat pengguna mengarahkan kursor ke gambar.
Kami 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;
}
Contoh menjelaskan:
- #home a:hover {background: url('img_navsprites_hover.gif') 0 -45px;} - Untuk ketiga gambar hover, kami menentukan posisi latar belakang yang sama, hanya 45px lebih jauh ke bawah