Dr Dave Barr presents fun with CSS cursors

Introduction

I missed out on the whole 90’s fad of adding custom cursors to websites as I never really saw the point. This has been further strengthened by the knowledge that they are a terrible idea. Bad for accessibility in a nutshell.

Having said all that I still wanted to have a play, get it out of my system if you will.

Hover over this section to see the default cursor.

Hover over this section to see a simulated link.

Hover over this section to see a simulated zoom-in.

I had a dream…

Yet another bonkers example of WebDev Midnight Madness. The concept of creating a hybrid theme came to me whilst struggling to sleep, what if I mixed a retro Apple Mac OS 9 GUI with CSS cursors from Star Trek?

Yeah, that died a death real fast in the cold light of day. However it struck me that I could have a play and also illustrate what a phenomenally bad idea it is to let non #a11y aware designers have access to what is essentially core OS functionality.

Build process

After a quick search for “Star Trek Icon Fonts” I found the TrekArrowheads Font by Pixel Sagas. Installed into Apple Font Book, created a Photoshop Doc where I selected the three symbols I wanted to work with. Added white stroke to each and rotated the default ‘arrow’ icon a tad to emulate the original.

I wasn’t after perfection. In fact, far from it.

Why it’s such a bad idea

Temptation creeps in to get users to bend to your imagination. I deliberately chose three icons that didn’t actually look anything like the originals to illustrate that defining your own graphical language without due care and attention is a really, really bad idea. There are other reason why and I invite you again to read Eric Bailey’s don’t use custom CSS mouse cursors post.

Download sample code

I’ve assembled all the parts so that you can play with them. The standard – software is provided “as is”, without warranty of any kind – applies here.

Download File

Zip Files Info

index.html

1.4KB

style.css

2.2KB

readme.txt

460 bytes

pointer.png

4.2KB

fun-with-css-cursors.png

30.5KB

default.png

3.2KB

zoom-in.png

4.6KB

Download

File: barrd-fun-css-cursors.zip
Details: 7 files @ 49.1KB

That’s all folks

Had a laugh putting this all together, a couple of hours well spent relaxing and playing with Star Trek related material. And, that’s another thing off my bucket-list, no need to ever go back to using it again as I’ve sated my desire to give it a try.

// End of Project

More Information

Don’t use custom CSS mouse cursors (ericwbailey.website)
TrekArrowheads Font (fontspace.com)

About Dave Barr

Bristol based Scottish Expat who has 20+ years experience of Web Development and is continually on the look out to improve his skill sets. Learning new and innovative solutions for current requirements in the world of IT, WebDev and eCommerce.