Image Sprite CSS
- Hal Sebelumnya Galeri Gambar CSS
- Hal Berikutnya Pemilih Properti CSS
Gambar Sprite
Gambar sprite adalah kumpulan gambar yang terdapat didalam gambar tunggal.
Halaman web yang mengandung banyak gambar mungkin memerlukan waktu yang lama untuk dimuat, serta akan memicu banyak permintaan server.
Penggunaan gambar sprite akan mengurangi jumlah permintaan server dan mempertahankan jalur bandwith.
Gambar Sprite - Contoh Sederhana
Kami menggunakan gambar tunggal berikut ("navsprites.gif") daripada menggunakan tiga gambar yang terpisah:
Dengan menggunakan CSS, kami hanya menampilkan bagian gambar yang diperlukan.
Dalam contoh di bawah ini, CSS menentukan bagian gambar "navsprites.gif" yang akan ditampilkan:
Contoh
#home {
width: 46px;
height: 44px;
background: url(navsprites.gif) 0 0;
}
Pengertian Contoh:
<img id="home" src="trans.gif">- Hanya definisi gambar transparen kecil, karena atribut src tidak boleh kosong. Gambar yang akan ditampilkan adalah gambar latar yang kami tentukan di CSS.width: 46px; height: 44px;- Definisi bagian gambar yang kita gunakanbackground: url(navsprites.gif) 0 0;- Definisi gambar latar dan posisinya (left 0px, top 0px)
Gambar Sprite - Membuat Daftar Navigasi
Kami ingin menggunakan gambar sprite ("navsprites.gif") untuk membuat daftar navigasi.
Kami akan menggunakan daftar HTML, karena hal ini dapat berupa tautan dan mendukung gambar latar:
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;
}
Pengertian Contoh:
- #navlist {position:relative;} - posisi diatur relatif, untuk memungkinkan penggunaan absolute positioning didalamnya
- #navlist li {margin:0;padding:0;list-style:none;position:absolute;top:0;} - Margin dan padding diatur ke 0, hapus list-style, dan semua item dalam daftar adalah lokasi absolut
- #navlist li, #navlist a {height:44px;display:block;} - Lebar semua gambar adalah 44px
Mulai sekarang mengatur lokasi dan gaya untuk setiap bagian spesifik:
- #home {left:0px;width:46px;} - Selalu lokasi ke kiri, lebar gambar 46px
- #home {background:url(navsprites.gif) 0 0;} - Definisi gambar latar belakang dan posisinya (left 0px, top 0px)
- #prev {left:63px;width:43px;} - Lokasi ke kanan 63px (#home lebar 46px + ruang ekstra di antara item), lebar 43px.
- #prev {background:url('navsprites.gif') -47px 0;} - Definisi gambar latar belakang ke kanan 47px (#home lebar 46px + 1px garis pemisah)
- #next {left:129px;width:43px;} - Lokasi ke kanan 129px (#prev mulai adalah 63px + lebar #prev adalah 43px + ruang kosong ekstra), lebar 43px.
- #next {background:url('navsprites.gif') -91px 0;} - Definisi gambar latar belakang ke kanan 91px (#home lebar 46px + 1px garis pemisah + #prev lebar 43px + 1px garis pemisah)
Image Sprite - Efek Penarik Tangan
Sekarang, kita akan menambahkan efek penarik tangan ke dalam daftar navigasi.
Pemberitahuan::hover selector dapat digunakan untuk semua elemen, bukan hanya untuk tautan.
Gambar baru kami ("navsprites_hover.gif") mengandung tiga gambar navigasi dan tiga gambar efek penarik tangan:
Karena ini adalah gambar, bukan enam file yang terpisah, jadi saat pengguna menarik mouse ke gambar,Tidak ada kemampuan loading delay。
Kami hanya menambahkan tiga baris kode untuk mencapai efek penarik tangan:
Contoh
#home a:hover {
background: url('navsprites_hover.gif') 0 -45px;
}
#prev a:hover {
background: url('navsprites_hover.gif') -47px -45px;
}
#next a:hover {
background: url('navsprites_hover.gif') -91px -45px;
}
Pengertian Contoh:
#home a:hover {background: transparent url('img_navsprites_hover.gif') 0 -45px;} - Kita menetapkan posisi latar belakang yang sama untuk semua tiga gambar hover, hanya turun 45 paksi
- Hal Sebelumnya Galeri Gambar CSS
- Hal Berikutnya Pemilih Properti CSS
