Use of Custom Cursors

Use of Custom Cursors
48 Flares 48 Flares ×

Use of Custom Cursors

Smart use of Custom Cursors in a web applications can improve the User Experience of an application drastically. So in this article we will get introduced to the use of built-in cursor as well as custom cursor using cursor: CSS property. You can use .png image as a custom cursor image. Also there are some built-in cursors which are dependent on browser and operating system you are using. So, you need to use this property wisely and smartly to work for you.

Built-in Cursors

Following are some built-in cursor properties

/*Default built-in cursors*/
.auto            { cursor: auto; }
.default         { cursor: default; }
.none            { cursor: none; }
.context-menu    { cursor: context-menu; }
.help            { cursor: help; }
.pointer         { cursor: pointer; }
.progress        { cursor: progress; }
.wait            { cursor: wait; }
.cell            { cursor: cell; }
.crosshair       { cursor: crosshair; }
.text            { cursor: text; }
.vertical-text   { cursor: vertical-text; }
.alias           { cursor: alias; }
.copy            { cursor: copy; }
.move            { cursor: move; }
.no-drop         { cursor: no-drop; }
.not-allowed     { cursor: not-allowed; }
.all-scroll      { cursor: all-scroll; }
.col-resize      { cursor: col-resize; }
.row-resize      { cursor: row-resize; }
.n-resize        { cursor: n-resize; }
.e-resize        { cursor: e-resize; }
.s-resize        { cursor: s-resize; }
.w-resize        { cursor: w-resize; }
.ns-resize       { cursor: ns-resize; }
.ew-resize       { cursor: ew-resize; }
.ne-resize       { cursor: ne-resize; }
.nw-resize       { cursor: nw-resize; }
.se-resize       { cursor: se-resize; }
.sw-resize       { cursor: sw-resize; }
.nesw-resize     { cursor: nesw-resize; }
.nwse-resize     { cursor: nwse-resize; }

Built-in Cursors

Note: cursor: none; not supported until Firefox 3, Safari 5, and Chrome 5.

Out of the above not-allowed, no-drop, vertical-text, all-scroll, col-resize, row-resize are not supported in IE and Opera. Bad luck!

Custom Cursors Using Image

Using custom cursors, you can ensure all applications are using the same cursor for a more consistent experience. You can use a .png image as a cursor image. For that there is a simple line of code

/*Image Cursor*/
.image-pointer {
	cursor:url(img/pointer.png), auto;

Custom Cursors

Note: Image URL cursors not supported in Opera.

It’s nice to design your own cursors, since sometimes the built-in ones may be a little basic looking. If you do this, please keep in mind that users are used to the built in ones, so your custom cursor shouldn’t look too much different than them if you want your application to be easy-to-use.

48 Flares Twitter 16 Facebook 16 Google+ 14 LinkedIn 0 Pin It Share 2 48 Flares ×
author avatar

Akash is a blogger, amateur photographer, speaker and a UI designer from Pune, India. He loves designing UI for websites and web applications for his clients. You can get in touch with him | Twitter | Facebook

Connect with us

Leave a Reply

(*) Required, Your email will not be published