Adding a Custom Cursor

Sometimes you just have to add a little pizzazz to your site. And to be completely honest, even though I am a programmer my ADD brain just doesn’t let me do clean and minimalistic design. My brain screams at me BIG AND BOLD!!!!

Recently I have been revisiting the basics. By doing this I have found out how lazy and dependent I have become on CSS frameworks/libraries. I remember how awesome plain old vanilla CSS can be.

I thought back to cutesy hand made sites from another time and age. I remember how they showed a person’s personality in all the little details that were included.

The custom cursor was always a fun little touch. I thought adding one to a site would be labor intensive but in actuality, was one of the simplest things to set up.

You will want to start out with a transparent png image file. Don’t worry there is no shortage of them on the web to use. Just make sure you use the proper credit to the site or artist you found it with.

You will need an image editor. I am an old school Photoshop user. But you can get free and open source Gimp on your machine or try the myriad of online image editors.

Here is a sweet png of Finn Octocat I found and then I take into Photoshop.

Sizing it is not an exact science. It will be something you will have to play with. But somewhere between 50px to 30px should do depending on the actual image.

After you resize it, its time to add it to your project. Go ahead and save your newly sized png into a images folder in your project workspace.

Now head over to your CSS file and add it with…..

cursor: url(‘/images/compcursor2.png’), auto;

Or whatever you named your png file.

And voila..it should be working. One of the easiest things to do to add a little personality to your site.