Cara Menggunakan Sprite Images di CSS

Oke, sahabat blogger kali ini saya akan memberikan tutorial mengenai cara menggunakan sprite images di css. Sebuah sprite gambar koleksi gambar dimasukkan ke dalam satu gambar.

Sebuah halaman web dengan banyak gambar bisa memakan waktu lama untuk memuat dan menghasilkan beberapa permintaan server. Contohnya gambar di bawah ini.

<div style="text-align: justify;"><!DOCTYPE html></div><div style="text-align: justify;"><html></div><div style="text-align: justify;"><head></div><div style="text-align: justify;"><style></div><div style="text-align: justify;">#navlist{position:relative;}</div><div style="text-align: justify;">#navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;}</div><div style="text-align: justify;">#navlist li, #navlist a{height:44px;display:block;}</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">#home{left:0px;width:46px;}</div><div style="text-align: justify;">#home{background:url('img_navsprites_hover.gif') 0 0;}</div><div style="text-align: justify;">#home a:hover{background: url('img_navsprites_hover.gif') 0 -45px;}</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">#prev{left:63px;width:43px;}</div><div style="text-align: justify;">#prev{background:url('img_navsprites_hover.gif') -47px 0;}</div><div style="text-align: justify;">#prev a:hover{background: url('img_navsprites_hover.gif') -47px -45px;}</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">#next{left:129px;width:43px;}</div><div style="text-align: justify;">#next{background:url('img_navsprites_hover.gif') -91px 0;}</div><div style="text-align: justify;">#next a:hover{background: url('img_navsprites_hover.gif') -91px -45px;}</div><div style="text-align: justify;"></style></div><div style="text-align: justify;"></head></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><body></div><div style="text-align: justify;"><ul id="navlist"></div><div style="text-align: justify;"><li id="home"><a href="default.asp"></a></li></div><div style="text-align: justify;"><li id="prev"><a href="css_intro.asp"></a></li></div><div style="text-align: justify;"><li id="next"><a href="css_syntax.asp"></a></li></div><div style="text-align: justify;"></ul></div><div style="text-align: justify;"></body></div><div style="text-align: justify;"></html></div><div style="text-align: justify;"><br /></div>

Berikut contoh penggunaan sprite images di css. Semoga bermanfaat.

Download File Lengkapnya disini

share this article to: Facebook Twitter Google+ Linkedin Technorati Digg

Posted by Abdul Sopyan, Published at 22.47 and have 0 komentar

Roger45

Cara Menggunakan Sprite Images di CSS

Cara Menggunakan Sprite Images di CSS

Tidak ada komentar:

Posting Komentar

Arcive

ShinyStat

Followers

Popular Posts

Blog Archive