1

I implemented a custom cursor in CSS (for the pointer you see when hovering over links). Here's a simple fiddle.

It's a riff on the super old Mac OS link cursor using a middle finger instead of the index finger we all know and love. It's supposed to be pixelated.

Generally this is displayed at 1x so there's nothing to anti-alias. …but lots of people (especially those with multiple displays) tend to make their cursor bigger. (Mac OS Settings > Accessibility > Display > Cursor Size slider). Unfortunately this automatically anti-aliases the image.

This is sort of similar to another question but that code doesn't help with the cursor. Any ideas?

FWIW I've had the same problem in the latest builds of Safari, Webkit nightly, Chrome, and Firefox.

Community
  • 1
  • 1
Scrollwheelie
  • 811
  • 2
  • 9
  • 16
  • I don;t have a Mac here, so sorry for the stupid question, but if you make a cursor twice the size (i.e. a 32x32 png file) does the system still multiply it by 2? – Mr Lister Aug 24 '16 at 19:51
  • @MrLister Kind of. The cursor size slider doesn't snap to discrete positions or show the pixel size so hitting 32x32 on the nose would be difficult for the user. In any case, the CSS cursor size is inherited by the system settings so the developer doesn't have much choice in the matter. – Scrollwheelie Aug 25 '16 at 05:39

0 Answers0