Oke, kita akan belajar tentang editing ikon kursor di blog maupun situs web kesayangan kita. (dalam artikel ini saya sertakan pula HTML file lengkap dengan kode CSS setiap kursor yang di support oleh Peramban Browser indonesia). Sekarang apa itu CSS ?
CSS singkatan dari Cassading Style Sheets yaitu bahasa pemrograman yang di khususkan untuk mempercantik tampilan sebuah object, khususnya web object . CSS lah yang mengatur jenis font, warna font, warna background sebuah tag, warna background halaman, warna border atau garis pinggir, padding atau jarak yang menghubungkan antara satu object dengan object lain, serta posisi sebuah object di dalam halaman web. CSS sering di integrasikan dengan HTML maupun javascript, karena keberadaanya sangatlah vital untuk keberlangsungan suatu efek memperindah halaman web kita.
Oke sebagai percobaan silahkan anda buka notepad atau Macromedia dreamweaver Segala versi, bisa juga dengan software-software web builder lain seperti joomla maupun frontpage, namun untuk demo, saya memakai Macromedia Dreamweaver 8.
Buat file HTML lalu masukan kode berikut :
<div style="background-color: rgb(51, 51, 51); cursor: auto; caption-side: inherit; font-family: papyrus; font-size: 78px; height: auto; text-align: center; text-transform: lowercase; z-index: auto;" align="center">Contoh objek</div>
Kita coba memakai font papyrus agar terlihat lebih indah.
Lihat bagian kode yang di cetak tebal....kode tersebut adalah CSS untuk cursor mouse anda, lalu simpan file kedalam direktori folder, bila anda memakai notepad, jangan lupa untuk mengubah type file menjadi all files lalu merubah encoding dari ANSI menjadi utf-8, kemudian memberi nama file dengan nama terserah asalkan berekstensi HTML contoh percobaan.html.(gambar 1)
Bila anda memakai software web builder, anda bisa langsung melakukan saving as html page.
Kemudian, buka file yang baru saja anda buat menggunakan browser peramban yang ada di PC anda, dan lihat hasilnya, coba anda sorotkan kursor pada teks yang anda buat, bentuk ikon kursor pasti akan berubah, sekali lagi jauhkan kursor dari teks (contoh objek) maka ikon kursor akan kembali seperti semula....
Oke, selanjutnya, edit file yang anda buat tersebut dan ganti kode cursor: auto; menjadi kode-kode berikut ini :
cursor: auto;
cursor:crosshair;
cursor: default;
cursor: e-resize;
cursor: help;
cursor: inherit;
cursor: move;
cursor: ne-resize;
cursor: n-resize;
cursor: nw-resize;
cursor: pointer;
cursor: se-resize;
cursor: sw-resize;
cursor:text;
cursor: wait;
cursor:w-resize;
Agar lebih praktis, lakukan copy-paste dari kode dibawah ini beberapa kali, lalu edit bagian yang di cetak tebal ganti dengan kode kursor di atas satu demi satu.
<div style="background-color: rgb(51, 51, 51); cursor: auto; caption-side: inherit; font-family: papyrus; font-size: 78px; height: auto; text-align: center; text-transform: lowercase; z-index: auto;" align="center">Contoh objek</div>
Simpan hasil editan anda, lalu buka melalui browser. sorotkan mouse secara bergantian pada teks "Contoh Objek" dan lihat perubahan ikon mouse anda.
Cara ini biasa dipakai untuk memberikan informasi visual pada pengunjung web mengenai konten yang ada........
Brikut Contoh-contoh setting cursor , sorotkan mouse anda pada masing2 warna yang berbeda.
cursor: auto;
cursor:crosshair;
cursor: default;
cursor: e-resize;
cursor: help;
cursor: inherit;
cursor: move;
cursor: ne-resize;
cursor: n-resize;
cursor: nw-resize;
cursor: pointer;
cursor: se-resize;
cursor: sw-resize;
cursor:text;
cursor: wait;
cursor:w-resize;
Salam!!!
21 komentar temen:
Mantab nih tutorialnya . . .
Salam.
Ok makasaih gan
nambah pengetahuan nie... :)
Mampir n makasih atas info menarik ini sob..
Lama gak main2 ke sini sob.. postingannya makin ok aja nih.. thanks ya
wah manatb nich infonya..
makasie ya mas
Salam kenal...sy masih pemula banget. Makasih banyak infonya, pelan pelan akan saya praktekkan. walaupun harus dibaca berulang kali supaya bener bener 'ngeh'
blogwalking sob..
sekalian nyerap ilmu disini
wah expert banget nih dalam hal css
numpang nyimak ya...
salam kenal .
makasih yaa ka infonya .
sukses .
bisa dicoba neh. thanks ya
Mantap cuy caranya... baru tau saya..
salam kenal .
thanks for share .
Mantab sob. Mohon Ijin di bookmark...
keren sob tips-nya , jadi tmbah ilmu nich . ,
wah dapat ilmu lagi nih :)
Kudu banyak belajar juga nih
Thanks ya sob
ajiib nii tutornya .
makasih yaa .
salam .
Wah doyan utak-atik CSS juga nih...mantap deh
sebagai tambahan,,
dengan css kita bisa membuat tampilan website menjadi dinamis,,
pa lagi dg fitur css3..
salam kenal .
ilmu baru .
makasih yaa .
sukses slalu .
boleh ganti nih...thanks bro... :D
I recently came across your blog and have been reading along. I thought I would leave my first comment. I dont know what to say except that I have enjoyed.
Thank you for your work !
Novie
Kirim Komentar » Blogger Comment Form