CSS Custom Cursors
Remember the Web 1.0 days where you had to customize your site in every way possible? You abused the scrollbars in Internet Explorer, of course, but the most popular external service I can remember was CometCursor. CometCursor let you create and use loads of custom cursors for your site. Now we probably laugh at that in hindsight but there may be times when you'd like to customize a cursor, and CSS lets you do it quite easily!
cursor CSS property accepts a series of cursors, and using a
url() value allows you to set a custom CSS cursor:
cursor: url('some-cursor.ico'), default;
It's always best to have a backup native cursor like
default, much as you set broader
font-family's when styling text. Also note that Firefox scales the cursor down to a smaller size whereas Chrome currently allows a larger original size.
Now don't go doing this willy nilly, use a custom cursor in places where you think important, like a magnifying glass + or - over zoomable images and such.
You've probably heard the talk around the water cooler about how promises are the future. All of the cool kids are using them, but you don't see what makes them so special. Can't you just use a callback? What's the big deal? In this article, we'll...
One of my favorite social APIs was the Open Graph API adopted by Facebook. Adding just a few META tags to each page allowed links to my article to be styled and presented the way I wanted them to, giving me a bit of control...
How do you specify what is the clicking point? Must be part of the file format or it can be defined in the CSS for other image formats (as PNG or GIF)?
It’s probably worth noting that the keyword fallback is mandatory, and, your also able to use
.pngfiles as icons.
I’ve used these about a year ago for math teaching tools. Take note that the hit point is always set to the top left point however you can change that when creating the ICO file
The cursor disappears when you right click. Any workaround?
@Filip It doesn’t for me – Firefox Nightly
ouh … and some more links:
I didn’t know that this is standard, that we can use .ico files as cursors. How neat :) Thanks for sharing.
How about browser support? Does it work in IE9+ and other browsers? Thanks.