April 11, 2016

Special Cursor Property in CSS

Let us see a practical overview of CSS Cursor Property which we can use to display a different types of cursor when the mouse pointer hovers on a particular element on a webpage. Usually, pointer cursor  icon,  mover  cursor icon and text cursor icon are mainly used on a webpages and wide number of users are familiar to these. Well however, we can let them experience some different types of cursors that are available in the CSS cursor property.

Here we step forward to the practical example of CSS Cursor Property:

Let us now create an HTML document which has style sheet linked to it so we can add some rules to specify paragraph height and color etc and this is the fun part of CSS.

So, lets begin...

<!DOCTYPE html>
<html>
<head>

<style type="text/css">


P { border : 2px dashed pink;
padding: 20px 10px;
height : 20px;
width : 120px;
float : left;
margin : 10px;
text-align : center;
text-transform : uppercase;
}


p.help-cursor { cursor : help }
p.arrow-cursor { cursor : default }
p.pointer-cursor { cursor : pointer }
p.crosshair-cursor { cursor : crosshair }
p.move-cursor { cursor : move }
p.text-cursor { cursor : text }
p.wait-cursor { cursor : wait }
p.progress-cursor { cursor : progress }
p.n-resize-cursor { cursor : n-resize }
p.ne-resize-cursor { cursor : ne-resize }
p.e-resize-cursor { cursor : e-resize }
p.se-resize-cursor { cursor : se-resize }
p.s-resize-cursor { cursor : s-resize }
p.sw-resize-cursor { cursor : sw-resize }
p.w-resize-cursor { cursor : w-resize }
p.nw-resize-cursor { cursor : nw-resize }


</style>
</head>
<body>


<p class ="help-cursor">Help Cursor </p>
<p class ="arrow-cursor">Arrow Cursor</p>
<p class ="pointer-cursor">Pointer Cursor </p>
<p class ="crosshair-cursor">Crosshair Cursor </p>
<p class ="move-cursor">Move Cursor </p>
<p class ="text-cursor">Text Cursor </p>
<p class ="wait-cursor">Wait Cursor </p>
<p class ="progress-cursor">Progress Cursor </p>
<p class ="n-resize-cursor">N-Resize Cursor </p>
<p class ="ne-resize-cursor">Ne-Resize Cursor </p>
<p class ="e-resize-cursor">E-Resize Cursor </p>
<p class ="se-resize-cursor">Se-Resize Cursor </p>
<p class ="s-resize-cursor">S-Resize Cursor </p>
<p class ="sw-resize-cursor">Sw-Resize Cursor </p>
<p class ="w-resize-cursor">W-Resize Cursor </p>
<p class ="nw-resize-cursor">Nw-Resize Cursor </p>


</body>
</html>

Now, hover your cursor pointer on each box to see the results.

Help
Arrow
Pointer
Crosshair
Move
Text
Wait
Progress
N-Resize
Ne-Resize
E-Resize
Se-Resize
S-Resize
Sw-Resize
W-Resize
Nw-Resize

No comments :

Post a Comment