CSS : Cursor dan Value-nya

Fungsi dari css property cursor ini ialah merubah tampilan cursor

Too many people overvalue what they are not and undervalue what they are. Malcolm S.

Fungsi dari css property cursor ini ialah merubah tampilan cursor

Last Modif at July 8th, 2011

css lagi :)
sesuai dengan judul, kali ini kita akan mambahas penggunaan cusor didalam halamana web, dengan property cursor, kita bisa menentukan nilai/tampilan cursor pada halaman web atau elemen-elemen tertentu, Ok untuk contohnya silahkan arahkan cursor ke beberapa bidang/box dibawah

cursor:none
cursor:default
cursor:crosshair
cursor:pointer
cursor:move
cursor:e-resize
cursor:ne-resize
cursor:nw-resize
cursor:n-resize
cursor:se-resize
cursor:sw-resize
cursor:s-resize
cursor:w-resize
cursor:se-text
cursor:wait
cursor:progress
cursor:help
cursor:url(_lokasi_file_.png), default
cursor:url(_lokasi_file_2.png), default

note
pada umumnya, browser atau peramban sudah memiliki setting default untuk tag-tag tertentu misal

  • tag body nilai cursornya adalah default
  • tag a:link nilai cursor defaultnya adalah pointer
  • tag p, textarea, input[type='text'], dan lain-lain nilai cursor default-nya adalah cursor text

dengan css property cursor ini, kita bisa menyesuaikan settingan cursor web/blog sesuai dengan keiginan kita, untuk memulai kita harus tahu

Sintaks property cursor

Sintaks adalah aturan penulisan, untuk property cursor sintaksnya seperti ini


selector{
cursor: value;
}

valuenya property cursor antara lain

  • none
  • default
  • crosshair
  • pointer
  • move
  • e-resize
  • ne-resize
  • nw-resize
  • n-resize
  • se-resize
  • sw-resize
  • s-resize
  • w-resize
  • text
  • wait
  • progress
  • help
  • url(_lokasi_file_cursor)

contoh penggunan cursor

misal kita ingin merubah cursor body dengan gambar, tambahkan style seperti ini


body{
cursor:url(http://lh4.ggpht.com/_yy4dpxzSJ0c/Sw2YfDne5dI/AAAAAAAAAow/jkFqy1KONFo/9778a.gif), default;/* fungsi defualt ini : jika gambarnya ngga ada*/
}

keterangan
sesuai dengan penjelasan diatas, fungsinya ialah merubah cursor default dengan cursor url(gambar)
sedangkan yang dimulai dari http//--sampai---.gif adalah lokasi gambar cursornya.

contoh html dan css cursor

copy markup berikut lalu save as dengan format html, silakan edit untuk belajar


<html>
<head>
<title>CSS : input[type='']</title>
<meta content="indam url:http://www.indaam.net" name="author"/>
<meta http-equiv="refresh" content="320;url=http://www.indaam.net"/>
<style type="text/css">
/*
CREATED BY :
name : Indam
website : http://www.indaam.net
facebook : http://facebook.com/indaam
twitter : http://twitter.com/indaam
email : indaam[at]gmail.com
*/
body{
width:80%;
margin:30px auto;
}
.cursor-box,
.cursor-box1,
.cursor-box2,
.cursor-box3,
.cursor-box4,
.cursor-box5,
.cursor-box6,
.cursor-box7,
.cursor-box8,
.cursor-box9,
.cursor-box10,
.cursor-box11,
.cursor-box12,
.cursor-box13,
.cursor-box14,
.cursor-box15,
.cursor-box16,
.cursor-box17,
.cursor-box18{
border-radius:6px;
margin:10px auto;
width:300px;
clear:both;
text-align:center;
font:bold 20px arial;
padding:150px 0;
border:1px solid #ddd;
}
.cursor-box{cursor:none;}
.cursor-box1{cursor:default ;}
.cursor-box2{cursor:crosshair ;}
.cursor-box3{cursor:pointer ;}
.cursor-box4{cursor:move ;}
.cursor-box5{cursor:e-resize ;}
.cursor-box6{cursor:ne-resize ;}
.cursor-box7{cursor:nw-resize ;}
.cursor-box8{cursor:n-resize ;}
.cursor-box9{cursor:se-resize ;}
.cursor-box10{cursor:sw-resize ;}
.cursor-box11{cursor:s-resize ;}
.cursor-box12{cursor:w-resize ;}
.cursor-box13{cursor:text ;}
.cursor-box14{cursor:wait ;}
.cursor-box15{cursor:progress ;}
.cursor-box16{cursor:help ;}
.cursor-box17{cursor:url(http://lh5.ggpht.com/_yy4dpxzSJ0c/Sw2Ye7DUklI/AAAAAAAAAos/3IWiTnC5aGA/10256a.gif), default;}
.cursor-box18{cursor:url(http://lh4.ggpht.com/_yy4dpxzSJ0c/Sw2YfDne5dI/AAAAAAAAAow/jkFqy1KONFo/9778a.gif),default;}
</style>
</head>
<body>
<div class='cursor-box'>cursor:none</div>
<div class='cursor-box1'>cursor:default</div>
<div class='cursor-box2'>cursor:crosshair</div>
<div class='cursor-box3'>cursor:pointer</div>
<div class='cursor-box4'>cursor:move</div>
<div class='cursor-box5'>cursor:e-resize</div>
<div class='cursor-box6'>cursor:ne-resize</div>
<div class='cursor-box7'>cursor:nw-resize</div>
<div class='cursor-box8'>cursor:n-resize</div>
<div class='cursor-box9'>cursor:se-resize</div>
<div class='cursor-box10'>cursor:sw-resize</div>
<div class='cursor-box11'>cursor:s-resize</div>
<div class='cursor-box12'>cursor:w-resize</div>
<div class='cursor-box13'>cursor:se-text</div>
<div class='cursor-box14'>cursor:wait</div>
<div class='cursor-box15'>cursor:progress</div>
<div class='cursor-box16'>cursor:help</div>
<div class='cursor-box17'>cursor:url(_lokasi_fil_.png),default</div>
<div class='cursor-box18'>cursor:url(_lokasi_fil_2.png),default</div>
<span style='position:fixed;bottom:3%;right:3%;display:block:margin:0;font:italic bold 120% "comic sans ms";'>Original Source Code by <a style='text-decoration:none;color:red;' href='http://www.indaam.net' target='blank' title='Indam Site'>Indam Site</a></span>
<!-- regards
http://www.indaam.net -->
</body>
</html>

fungsi dan kegunaan
Untuk kasus-kasus tertentu, penggunaan property cursor ini sangat disarankan, misal sobat membuat box dailog yang bisa di drag-drop, kan aneh kalo cursornya pointer, text atau default.
semoga bermanfaat

Indam

A geek, frontend developer. Like you, coding & experiment.
#web #design #ui #ux #standard #dreamer
#welding #interisti #beer #coffee

2 thoughts on “CSS : Cursor dan Value-nya”

  1. sabia says:

    inilah tutorial yang aku ingin pelajari, mempelajari kode2 css dan kegunaannya dalam fungsionalitas..

    makasih oom…

  2. doni says:

    agus it’s the best

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Disclaimer, FAQ & License

Hello Gaes, untuk tujuan apapun semua content text di blog ini dapat di copas, tanpa harus menulis sumbernya. Namun content yang berupa gambar--harus Anda periksa kembali lisensinya.

Adapun(mungkin) sebagian content blog ini sudah kadaluarsa atau sudah tidak relevan, contoh :'Theme default WordPress 3+ adalah Twentyten 'apakah selamanya Twentyten?' ngga kan? Indam selaku pengelolah berharap melaporkan jika menemukan content basi yang mungkin dapat menimbulkan salah persepsi tentang content dan konsep itu sendiri. Oia, karena blog ini bersifat pribadi dan bukan untuk komersil, mungkin anda juga akan menemukan tulisan tentang aku dan hal-hal rancu yang sama sekali ngga ada hubungan dengan web dan blog-blogan. Perlu dicatat: Indam selaku pengelolah tidak bertanggung jawab atas kerugian materi, waktu, tenaga, pikiran yang mungkin ditimbulkan dari sini. So, pandai-pandai yah dalam memilah informasi. Thanks for reading.

Quote

Ketika Anda melihat orang lain mengangkat dirinya dengan cara merendahkan orang lain, sebenarnya orang itu lebih rendah dari mereka yang direndahkan. Phidias--greece filsuf

+
-