10.20.2010

CSS Cursor dalam HTML


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:

Artta mengatakan...

Mantab nih tutorialnya . . .


Salam.

Rizki @ Rizki Ilyas Blog mengatakan...

Ok makasaih gan
nambah pengetahuan nie... :)

Saung Web mengatakan...

Mampir n makasih atas info menarik ini sob..

Link Tea mengatakan...

Lama gak main2 ke sini sob.. postingannya makin ok aja nih.. thanks ya

teknik seo blogspot mengatakan...

wah manatb nich infonya..
makasie ya mas

Distro Islami Dizhwar mengatakan...

Salam kenal...sy masih pemula banget. Makasih banyak infonya, pelan pelan akan saya praktekkan. walaupun harus dibaca berulang kali supaya bener bener 'ngeh'

teknik seo blogspot mengatakan...

blogwalking sob..
sekalian nyerap ilmu disini

toko online mengatakan...

wah expert banget nih dalam hal css

numpang nyimak ya...

Kuliner mengatakan...

salam kenal .
makasih yaa ka infonya .
sukses .

Tour Travel mengatakan...

bisa dicoba neh. thanks ya

Frzhrdynt mengatakan...

Mantap cuy caranya... baru tau saya..

Media Nusantara mengatakan...

salam kenal .
thanks for share .

hybrid cars mengatakan...

Mantab sob. Mohon Ijin di bookmark...

Unknown mengatakan...

keren sob tips-nya , jadi tmbah ilmu nich . ,

Hellen mengatakan...

wah dapat ilmu lagi nih :)

Kudu banyak belajar juga nih

Thanks ya sob

ICA Ups mengatakan...

ajiib nii tutornya .
makasih yaa .
salam .

Pulsa Elektrik mengatakan...

Wah doyan utak-atik CSS juga nih...mantap deh

TopanAprilia mengatakan...

sebagai tambahan,,
dengan css kita bisa membuat tampilan website menjadi dinamis,,
pa lagi dg fitur css3..

Museum mengatakan...

salam kenal .
ilmu baru .
makasih yaa .
sukses slalu .

Dunia-Uniks mengatakan...

boleh ganti nih...thanks bro... :D

Hp Cartridge Refill mengatakan...

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