Monkey Raptor: CSS: How to Set Custom Cursor

From earlier post - the dancing Homer - I put a custom cursor on hover event. The basic CSS for that is just like putting background image on an element.

cursor: url (URL-of-image),auto;

auto there is for fallback.

The image can be any kind of format: GIF, PNG, JPEG, etc. But, of course, for sleeker look, you have to put transparent background image, which can be accomplished in GIF (can be animated image also), PNG, and also SVG format.

It's a bit different than changing cursor image on a computer (Windows), which is using .cur or .ani format. If you have already got sets of cursor .cur or .ani images, all you gotta do is export those with AniTuner (the link is on the bottom of this post) to gif format. Then you can use them for your website/blog.

After converted the cursor format to animated gif, I then converted the exported gif to base64 data URI (link below this post). I dig the image URI format, because even though sometimes it can be larger than the original file size, the advantage is that I don't have to hotlink any image from anywhere.

DEMO
~ Hover your cursor on these colorful boxes ~

one

two

three

four

As you can see on the demo, the data URI didn't show any animation. That's fine, just for example purpose. These are the original images:

CSS

.row {
    height: 180px;
}

.column1,
.column2,
.column3,
.column4 {
    width: 180px;
    border-right: 2px solid #888;
    border-bottom: 2px solid #888;
    text-align: center;
}

.column1 {
    background: #e6de00;
}

.column2 {
    background: #47d2f5;
}

.column3 {
    background: #96a2ff;
}

.column4 {
    background: #ade600;
}

.column1:hover {
    cursor: url(URI-image-1),auto;
}

.column2:hover {
    cursor: url(URI-image-2),auto;
}

.column3:hover {
    cursor: url(URI-image-3),auto;
}

.column4:hover {
    cursor: url(URI-image-4),auto;
}

HTML elements

<table style="margin:auto">
    <tbody>
        <tr class="row">
            <td class="column1">one</td>
            <td class="column2">two</td>
            <td class="column3">three</td>
            <td class="column4">four</td>
        </tr>
    </tbody>
</table>

Links

The funky cursors above from: Totally Free Cursors
Export animated/static cursor to GIF: AniTuner freeware
Convert GIF to base64 image: WebSemantics

Monkey Raptor

Friday, May 31, 2013

CSS: How to Set Custom Cursor

No comments:

Post a Comment