Thursday, October 2, 2014

css untuk menampilkan/ mengubah bentuk cursor

Ketika membuat aplikasi berbasis web sering hal yang sepele terlupakan, seperti ketika cursor menunjuk ke area dalam page maka dapat disesuaikan dengan fungsinya. Misalnya ketika menunjuk button maka cursor berubah menjadi telunjuk, ketika menunjuk garis yang bisa didrag berubah menjadi anak panah, ketika sedang loading maka menampilkan loading/ wait. Beberapa yang saya dokumentasikan agar jika suatu saat lupa dapat saya cek lagi.

Buatlah file .html  dan isikan source dibawah ini ;

 <!DOCTYPE html>  
 <html>  
 <body>  
 <p>Mouse over the words to change the cursor.</p>  
 <span style="cursor:auto">auto</span><br>  
 <span style="cursor:crosshair">crosshair</span><br>  
 <span style="cursor:default">default</span><br>  
 <span style="cursor:e-resize">e-resize</span><br>  
 <span style="cursor:grab">grab</span><br>  
 <span style="cursor:help">help</span><br>  
 <span style="cursor:move">move</span><br>  
 <span style="cursor:n-resize">n-resize</span><br>  
 <span style="cursor:ne-resize">ne-resize</span><br>  
 <span style="cursor:nw-resize">nw-resize</span><br>  
 <span style="cursor:pointer">pointer</span><br>  
 <span style="cursor:progress">progress</span><br>  
 <span style="cursor:s-resize">s-resize</span><br>  
 <span style="cursor:se-resize">se-resize</span><br>  
 <span style="cursor:sw-resize">sw-resize</span><br>  
 <span style="cursor:text">text</span><br>  
 <span style="cursor:w-resize">w-resize</span><br>  
 <span style="cursor:wait">wait</span><br>  
 <span style="cursor:not-allowed">not-allowed</span><br>  
 <span style="cursor:no-drop">no-drop</span><br>  
 </body>  
 </html>

Source diatas merupakan beberapa bentuk cursor sederhana yang mungkin bisa digunakan.
Posted by at
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)