Sprite Gambar CSS ~ KODELOVER

Gambar sprite adalah kumpulan gambar yang dimasukkan ke dalam satu gambar.Sebuah halaman web dengan banyak gambar dapat memakan waktu lama untuk memuat dan menghasilkan beberapa permintaan server.Menggunakan sprite gambar akan mengurangi jumlah permintaan server dan menghemat bandwidth.

Sprite Gambar - Contoh Sederhana
Alih-alih menggunakan tiga gambar terpisah, kami menggunakan gambar tunggal ini ("img_navsprites.gif"):

Dengan CSS, kita bisa menunjukkan hanya bagian dari gambar yang kita butuhkan.Dalam contoh berikut, CSS menentukan bagian gambar "img_navsprites.gif" mana yang akan ditampilkan:Contoh

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

penjelaskan:

    <img id = "home" src = "img_trans.gif"> - Hanya mendefinisikan gambar transparan kecil karena atribut src tidak boleh kosong. Gambar yang ditampilkan akan menjadi background image yang kita tentukan di CSS
    width: 46px;height: 44px; - Mendefinisikan porsi gambar yang ingin kita gunakan
    background: url (img_navsprites.gif) 0 0; - Mendefinisikan gambar latar belakang dan posisinya (kiri 0px, top 0px)Ini adalah cara termudah untuk menggunakan sprite gambar, sekarang kita ingin mengembangkannya dengan menggunakan link dan efek hover.

Sprite Gambar - Membuat Daftar Navigasi
Kami ingin menggunakan gambar sprite ("img_navsprites.gif") untuk membuat daftar navigasi.Kami akan menggunakan daftar HTML, karena bisa berupa link 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;
}

penjelasan:

    #navlist {position: relative;} - posisi diatur ke relatif untuk memungkinkan posisi absolut di dalamnya
    #navlist li {margin: 0; padding: 0; list-style: none; position: absolute; top: 0;} - margin dan padding diatur ke 0, style daftar dihapus, dan semua item daftar diposisikan mutlak.
    #navlist li, #navlist a {height: 44px; display: block;} - tinggi semua gambar adalah 44pxSekarang mulai posisi dan gaya untuk setiap bagian tertentu:

    #home {left: 0px; width: 46px;} - Diposisikan sepanjang jalan ke kiri, dan lebar gambar 46px
    #home {background: url (img_navsprites.gif) 0 0;} - Mendefinisikan gambar latar belakang dan posisinya (kiri 0px, top 0px)
    #prev {left: 63px; width: 43px;} - Diposisikan 63px ke kanan (#home width 46px + beberapa spasi ekstra antar item), dan lebarnya 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 (mulai #prev adalah 63px + #prev width 43px + ruang ekstra), dan lebarnya 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 Hover
Sekarang kami ingin menambahkan efek hover ke daftar navigasi kami.Catatan Tip: The: hover selector dapat digunakan pada semua elemen, tidak hanya pada link.Gambar baru kami ("img_navsprites_hover.gif") berisi tiga gambar navigasi dan tiga gambar digunakan untuk efek hover:

Karena ini adalah satu gambar tunggal, dan bukan enam file terpisah, tidak akan ada penundaan pemuatan saat pengguna melayang di atas 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;
}

penjelasan:

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

KODELOVER

Sprite Gambar CSS

Related Post