hallo penghuni dunia maya, pada kesempatan kali ini saya akan memberikan tutorial dalam Membuat Image Sprite dengan Pseudo Class.

Dipembahasan kali ini saya hanya memanfaatkan pseudo class di html dan css dalam Membuat Image Sprite dengan Pseudo Class.

Sebelum kita masuk ke pembahasan yang harus kalian ketahui bahwa image sprite adalah sekumpulan gambar yang berbeda tetapi disatukan dalam satu file gambar. Nah berikut ini contoh image sprite

Membuat Image Sprite dengan Pseudo Class

Oke setelah kita mengetahui apa itu image sprite, sekarang kita mulai Membuat Image Sprite dengan Pseudo Class. Dalam kasus ini kita menggunakan property css yaitu background-position untuk menentukan lokasi penempatan gambar.

 

Oke langsung saja sekarang kalian ketik syntax html dibawah ini dan simpan dengan nama sprite.html

Setelah selesai syntax htmlnya lanjut style cssnya kalian ketik seperti gambar dibawah ini dan simpan dengan format css

Setelah selesai html dan cssnya maka langsung saja jalankan/run dan hasilnya akan seperti gambar dibawah ini.

Membuat Image Sprite dengan Pseudo Class

jika hasilnya sudah seperti gambar diatas maka kalian telah berhasil dalam Membuat Image Sprite dengan Pseudo Class.

Sekian tutorial singkat dan sederhana dari saya dalam membuat image sprite dengan pseudo class.

Semoga bermanfaat terimakasih.