Tips Dan Trik Menyusun Skrip CSS Sprite Sederhana Online

zodiak scorpio-sagita-capriMembuat sprite dan mengukur sprite di 2 posting sebelumnya tidak susah-susah amat ya. Enaknya, semua online. Sekarang mau kita jadikan permainan sulap kecil dengan menyusun skrip CSS sprite sederhana, juga online, agar ketika mouse lewat di atas gambar zodiak polos, berubah warna.
 

Trik menyusun skrip CSS sprite sederhana

Di internet ada satu editor khusus menyusun skrip kode HTML dan CSS, yaitu CSSDesk (klik laman baru). Tampilannya seperti ini,
CSSDesk editor CSS dan HTML online
Ada 3 ruang, ruang kode HTML, ruang kode CSS, dan ruang tampilan (hasil). Asyik, tidak sabar ingin segera mencoba. Kita mulai. Hapus semua kode di HTML dan CSS.

Skrip HTML— pendek saja, isikan kode berikut di ruang HTML

<ul id="zodiak">
    <li id="win-kiri">  <a href="#1"></a></li>
    <li id="win-tengah"><a href="#2"></a></li>
    <li id="win-kanan"> <a href="#3"></a></li>
  </ul>

Penjelasannya belum sekarang. Format <ul> dan <li> biasa dipakai untuk teks dengan ‘bullet’ (‘butir’).

Skrip kode CSS — agak panjang, langsung lihat di editornya saja: kode HTML, CSS, dan hasil di CSSDesk (klik, laman baru).

Menguji CSS sprite di blog ini

Dimungkinkan, fitur CSS blog ini aktif. Kopas kode HTML dan kode CSS ke blog. Ini hasilnya,

Yes! …sem-pur-na.

Senang sekali. Senang bermain-main CSS sprite berhasil, senang teman blogger bisa ikut bermain HTML dan CSS meskipun hanya online dan belum di blog wordpress.com.

Kita baru meniru, belum membahas kode HTML dan CSS. Nanti lagi ‘deh.
 
:D  (kalau penasaran boleh lanjut ke halaman berikut)

Jenuh! Seling dengan bermain ini mau? Sliding Puzzle (permainan mendasari cara kerja sprite!)
 

Tagged with: , , , , , , , , ,
Ditulis dalam Blog Tips dan Trik, Blogging, Tutorial

Silakan komentar, 'like' juga oke

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: