We’re all familiar with the arrow on your screen that indicates where our mouse is pointing. It allows us to select things, specify where to enter text, highlight, grab, and many other actions.
This pointer, the cursor, can take many forms. You may not even notice the number of standard changes this element goes through. The most common are these two, the arrow and the pointer finger.
The first mouse was developed in the early sixties by William Englebert and released for production by 1970 from SRI. They called it an ‘XY position indicator for a display system.’
Before there was a mouse, there was no way to ‘click’ anything. All interactions were through the command line. This was the advent of using computers through graphical display. It made computers more accessible and usable and much closer to what we recognize today.
There are many default cursors you don’t have to code into a website you’re building. You’ll recognize all the ones here and more.
Just making this graphic I saw 8 different default cursors. Note, even though you may not be conscious of all the changes in cursor icons, if it's represented wrong, you will notice. If it were represented by a grabber hand when you hover over the address bar, for example. So any changes you make to the cursor should keep in mind it has the desired effect on your users.
Enough background, lets dig in! The CSS cursor property takes zero or more values, followed by a mandatory keyword, one of the words from the last slide (pointer, not-allowed, etc). The point to an images. The program will try to use the first url value and fall back to the second, and so on until finally the keyword is used.
There are size limits on the image. If it's too large, it will be ignored. You can set x and y coordinates for when that image should be used by adding numbers after the url.
There are some other tricks you can do with cursors, like hiding it over specific elements
Top comments (0)