Belajar Kode CSS & Desain Blog: CSS Cursor Property

Berbagai macam cursor dapat digunakan di web/blog, namun sebaiknya setiap cursor digunakan berdasarkan urgensinya. merubah cursor tanpa aturan yang benar kadang-kadang justru membuat pengunjung merasa tak nyaman. Bukan sebuah hal positif yang diharapkan tentunya, terlebih jika hanya gara-gara cursor kemudian pengunjung buru-buru meninggalkan blog karena merasa risi. Setiap elemen dalam web/blog dapat menggunakan cursor yang berbeda. Menggunakan dan menampilkan cursor hanya perlu menambah sebuah property cursor berikut value/nilai sesuai bentuk cursor yang ingin digunakan. Anda bisa menggunakan properti cursor melalui kode css atau langsung ditanamkan pada tag html.

Menggunakan cursor property dg kode css

<style type="text/css">
div.my-box{
      cursor:help;
}
</style>

<div class="my-box">Kontent disini!</div>

<style type="text/css">
img.my-pics{
      margin:20px;
      border:4px solid red;
      cursor:move;
}
</style>

<img class="my-pics" src="https://lh5.googleusercontent.com/-4Ky9M5tJohA/UDFIFmjNvqI/AAAAAAAAANY/nJhv22IiXYM/h100/monyet-pakai-kacamata.jpg" width="108" height="100" alt="cursor move" />

<a href="http://gubhugreyot.blogspot.com" style="cursor:wait;">gubhugreyot</a>

Klik button preview di bawah ini dan akan terlihat berbagai macam cursor yang dapat anda manfaatkan untuk blog/web anda. Di dalam kode html juga disertakan cara menggunakan css cursor property berikut cara penggunaan pada xHTML.

Please click the button to display. Continue with editing code and click to see the results!

<!DOCTYPE html>
<html>
<title>CSS Cursor Property</title>
<head>

<style type="text/css">
body{color:#000;font-family:Arial;font-size:14px;padding:0;margin:0 auto;background:#ccc; }
.rd{color:red;}.be{color:blue;}.gn{color:green;}
.konten{margin:20px 0;padding-left:30px;}
p{margin:0px 20px 2px 0px;background:#aaa;text-shadow:0 1px red,0 -1px red,1px 0 red,-1px 0 red;transition:0.4s;-o-transition:0.4s;-ms-transition:0.4s;-moz-transition:0.4s;-webkit-transition:0.4s;float:left;text-align:center;}p:hover{background:#fff;color:yellow;text-shadow:0px 2px red,2px 0 red,-2px 0 red,0 -2px red;}

</style>

<style type="text/css">
p{
    width:200px;
    font:bold 22px Arial;
    color:lightblue;
    padding:5px 0;
    border:3px double #900;
}
p.cao{cursor:auto;}
p.ccr{cursor:crosshair;}
p.cdt{cursor:default;}
p.chp{cursor:help;}
p.cme{cursor:move;}
p.cpr{cursor:pointer;}
p.cps{cursor:progress;}
p.ctt{cursor:text;}
p.cwt{cursor:wait;}
p.cit{cursor:inherit;}
p.ce-r{cursor:e-resize;}
p.cn-r{cursor:n-resize;}
p.cne-r{cursor:ne-resize;}
p.cnw-r{cursor:nw-resize;}
p.cs-r{cursor:s-resize;}
p.cse-r{cursor:se-resize;}
p.csw-r{cursor:sw-resize;}
p.cw-r{cursor:w-resize;}
p.ca-s{cursor:all-scroll;}
p.cn-d{cursor:no-drop;}
p.cn-a{cursor:not-allowed;}
p.cr-r{cursor:row-resize;}
p.cc-r{cursor:col-resize ;}
p.cv-t{cursor:vertical-text;}

div.boks{
   width:300px;
   height:80px;
   border:5px solid #333;
   margin:20px 10px 10px 125px;
   background:red;
   line-height:80px;
   font-size:22px;
   text-align:center;
   cursor:wait;
}
</style>
</head>

<body>
<div class="konten">

<p class="cao">Cursor Auto</p>
<p class="ccr">Cursor Crosshair</p>
<p class="cdt">Cursor Default</p>
<p class="chp">Cursor Help</p>
<p class="cme">Cursor Move</p>
<p class="cpr">Cursor Pointer</p>
<p class="cps">Cursor Progress</p>
<p class="ctt">Cursor Text</p>
<p class="cwt">Cursor Wait</p>
<p class="cit">Cursor Inherit</p>
<p class="ca-s">Cursor all-scroll</p>
<p class="cn-d">Cursor no-drop</p>
<p class="cn-a">Cursor not-allowed</p>
<p class="cv-t">Cursor vertical-text</p>
<p class="ce-r">Cursor e-resize</p>
<p class="cn-r">Cursor n-resize</p>
<p class="cne-r">Cursor ne-resize</p>
<p class="cnw-r">Cursor nw-reize</p>
<p class="cs-r">Cursor s-resize</p>
<p class="cse-r">Cursor se-resize</p>
<p class="csw-r">Cursor sw-resize</p>
<p class="cw-r">Cursor w-resize</p>
<p class="cc-r">Cursor col-resize</p>
<p class="cr-r ">Cursor row-resize</p>

<br style="clear:both" />

<img src="https://lh5.googleusercontent.com/-4Ky9M5tJohA/UDFIFmjNvqI/AAAAAAAAANY/nJhv22IiXYM/h80/monyet-pakai-kacamata.jpg" height="80" width="87" style="cursor:help;margin:20px 10px 10px 0;border:5px solid #eee;border-radius:5px;clear:right;float:left;"/>



<div class="boks">div dengan cursor » wait</div>

</div>
</body> 
</html>

Belajar Kode CSS & Desain Blog

Halaman

CSS Cursor Property

Menggunakan cursor property dg kode css

Tidak ada komentar:

Posting Komentar

Archive Blog C l o s e

Arsip Blog

My Profile C l o s e

Mengenai Saya

Follower C l o s e

Follower

RSS C l o s e

Label C l o s e

Label

Halaman

date_replace('8.21.2012');

CSS Cursor Property

Menggunakan cursor property dg kode css

Tidak ada komentar:

Posting Komentar

Archive BlogC l o s e

Arsip Blog

My ProfileC l o s e

Mengenai Saya

FollowerC l o s e

Follower

RSSC l o s e

LabelC l o s e

Label

Archive Blog C l o s e

My Profile C l o s e

Follower C l o s e

RSS C l o s e

Label C l o s e