News

Use CSS to create custom web cursors

Inspired by a technique within the JOVA design, we take a closer look at the options for implementing alternative CSS cursors

CustomWebCursors

CustomWebCursors

DOWNLOAD TUTORIAL FILES

Stick to the point

Within the gallery section of jovaconstruction.com you’ll notice that the photography zooms out to fill the browser. To close these images and return to the browser, users only need to click. This is conveyed to visitors in a more subtle way by switching the cursor to a custom icon. It’s a relatively simple technique, here we’ll examine the key steps to creating a suitable image file and then the CSS required to switch it.

File types and dimensions

The custom JOVA gallery cursor is a white crosshair icon on a transparent background that uses the PNG file type. But you can, in fact, use any of
the PNG, GIF, JPG, BMP and the CUR formats. This is because they are all supported, along with SVG, in Gecko browsers. JOVA’s cursor measures 42 by 42 pixels in size and although 32 by 32 pixels is a universal standard. Gecko browsers like Firefox for example, should actually enable cursors up to a maximum size of 128 by 128 pixels.

Draw your cursor

We’ll follow our example and create a new 42 by 42 pixel image in the graphics editor of your choice, in Photoshop or equivalent software. Working on a transparent layer, you’ll want to zoom in to see the pixel grid and ensure your cursor icon is perfectly central and symmetrical. Adding a small amount of anti-aliasing helps to smooth the edges, plus you’ll want to think about the significance of your chosen icon in terms of where it is being used.

The basic CSS styling

Save the image in your favoured file format, here we’ve named it ‘myCursor’ and used the PNG extension. Place it within the root of your page or the image folder for your site. The CSS required is then very simple, although there are a few optional parameters to examine. We’ll start with the basic syntax, first for switching the cursor to popular alternative system pointers, then to our custom image:

001 myTargetElement {
002 /* Use one of following to revert to default arrow, hand pointer,     bidirectional arrows or text bar
003 cursor: default;
004 cursor: pointer;
005 cursor: move;
006 cursor: text;
007 /* Sets to our own cursor image */
008 cursor: url(‘myCursor.png’);
009 }

Define cursor fallbacks

Another way of handling your chosen cursors and ensuring cross-browser support, is by listing some inline fallbacks. This way you can stipulate a preference for certain designs in a single image format, which if not supported will revert to an alternative. This process is as easy as listing each inline fallback with commas like the following, and it even provides a preferred system option if all else fails:

001 myTargetElement {
002 /* Sets to cursor image, falling     back to alternatives */
003 cursor: url(‘myCursor.cur’),     url(‘myCursor.png’), move;
004 }

Set the cursor hotspot

An important final detail is the cursor hotspot or where the point of focus is on your cursor icon. If your image is arrowed and has a particular point that is off-centre, or you wish to override the default top-left (0,0) coordinates or those defined within the file (CUR/XBM files), you can add hotspots to your CSS property. Our example has a central hotspot like that of JOVA, so with our image being 42 by 42 pixels we’ll make the x,y coordinates 21,21 like so:

001 myTargetElement {
002 /* Sets to cursor image, with     centre hotspot */
003 cursor: url(‘myCursor.png’) 21 21,     auto;
004 }

×