Apakah Anda pernah mendengar sebelumnya tentang CSS Sprites? Nama mungkin agak membingungkan. Sprite = Bidadari, bukan berarti seperti yang anda bayangkan. Sebuah sprite sebenarnya merupakan salah satu gambar besar yang terdapat beberapa bagian gambar kecil lainnya.
Apakah Anda pernah melihat teknik CSS di mana sebuah tombol atau button dengan menggunakan gambar? Ketika hover gambar tersebut berubah, trik ini yang akan kita bahas sekarang.
Berikut ini adalah contohnya:
Simple nya, css sprites memudahkan loading website agar tidak banyak image file yang di load ketika membuka halaman tersebut.
Berikut kita akan mencoba mengimplementasikannya pada sebuah icon untuk file download. Setiap file yang mempunya ekstensi berbeda harus mempunya icon masing-masing ekstensi tersebut.
Link PDF Link ZIP Link WORD Link AUDIO
Berikut adalah style yang digunakan seperti ini:
a.doc_pdf, a.doc_mp3, a.doc_doc, a.doc_zip {
float:left;
text-decoration:none;
line-height:16px;
padding-left:18px;
}
a.doc_pdf {
background:transparent url(images/file_ico.png) 0 0 no-repeat }
a.doc_zip {
background:transparent url(images/file_ico.png) -16px 0 no-repeat }
a.doc_doc {
background:transparent url(images/file_ico.png) -32px 0 no-repeat }
a.doc_mp3 {
background:transparent url(images/file_ico.png) -48px 0 no-repeat }
Empat kebutuhan gambar hanya di load dalam satu file saja. Disini anda tinggal memainkan background position saja sesuai kebutuhan.
Masukkan Komentar