Introducing the New CSS Cursor Styles in CSS3
The early days of web development were a thrill as new technologies and techniques were discovered. We experienced a few stagnant years in the middle of last decade but, thanks to HTML5, web development has become exciting again. In particular, CSS3 is evolving rapidly and you’ll find some interesting gems in the specifications.
In this article, we’re going to examine the CSS cursor property which, as you’d expect, allows you to change the cursor style as the mouse moves over an element. It’s become increasingly important for interactive web applications…
CSS2 Cursor Styles
CSS2 offered relatively few options (hover over any element to see how the cursor changes):
CSS3 Cursor Styles
We have more styles to choose from in CSS3. These work in IE9 and the latest versions of Firefox, Chrome, Safari and Opera except where indicated:
cursor: none (not IE, Safari, Opera)
cursor: context-menu (not Firefox, Chrome)
cursor: cell (not Safari)
cursor: alias (not Safari)
cursor: copy (not Safari)
Mozilla and some editions of Chrome and Safari offer a number of vendor-prefixed cursor styles which are likely to become part of the CSS3 specification:
cursor: -webkit-grab; cursor: -moz-grab;
cursor: -webkit-grabbing; cursor: -moz-grabbing;
cursor: -webkit-zoom-in; cursor: -moz-zoom-in;
cursor: -webkit-zoom-out; cursor: -moz-zoom-out;
Creating Your Own Cursor
Finally, you can create your own cursor graphic, e.g.
cursor: url(images/cursor.cur); cursor: url(images/cursor.png) x y, auto;
- Internet Explorer requires a Windows cursor file (.cur).
- Firefox, Chrome and Safari require an image — I’d recommend a 24-bit alpha-transparent PNG.
- Firefox also requires a second non-URL cursor fallback value.
- It’s not supported in Opera.
- x and y are optional properties in Firefox, Chrome and Safari which define the precise pointer position from the top-left of the graphic. If omitted, 0 0 is assumed.
Nice, but it sounds like too much effort to me! I’ll be sticking with the standard cursor styles…
And if you enjoyed reading this post, you’ll love Learnable; the place to learn fresh skills and techniques from the masters. Members get instant access to all of SitePoint’s ebooks and interactive online courses, like HTML5 & CSS3 For the Real World.
Comments on this article are closed. Have a question about CSS3? Why not ask it on our forums?