De seneste år har webdesign handlet meget om at få det hele til at virke på tværs af computere, telefoner og tablets.
Touch devices bruger ikke cursors, hvilket meget muligt kan være en af årsagerne til at cursor design nævnes meget sjældent på de store webdesign websites. Men en stor del af trafikken til websites kommer stadig via gode, gammeldags computere. Så jeg synes det er en detalje, der er værd at bruge lidt tid på.
Så: Er cursoren på dit website bare den normale hånd? Så er det på tide at pimpe den lidt op. Og du kan gøre det ret nemt og hurtigt – bare følg min guide her.
Design din cursor
Først og fremmest skal lave grafikken til din cursor. Det vil typisk være godt at bruge vektor-grafik, men jeg har også set et par eksempler, hvor der bliver brugt fotografier (bitmaps) som cursor. Se Hovers, Cursors and Cute Interactions på Awwwards for inspiration.
For mit vedkommende, vil jeg bare gøre standard-pointeren, hånden, lidt mere festlig. Så for brugervenlighedens skyld, vil jeg stadig gerne have det til at være en hånd. Den skal bare peppes lidt op, så det ikke ligner standard-hånden.
Derfor tager jeg udgangspunkt i en grafik-fil fra iconmonstr – en hånd. Jeg har downloadet den, og redigeret den i Adobe Xd. Baggrundsfarven er ændret til en gradient (lyserød til gul er mine farver), og der er tilføjet en kantfarve.
Eksporter filen i png-format, evt. med en @2x version og som en SVG-fil.
Implementer din cursor
Cursoren implementeres via CSS. Upload dine cursor-filer til dit website, og lav en css-selector, så alle links, knapper, input elementer mv. rammes. Skift derefter cursorens pointer ud med dine cursor-filer, som i følgende eksempel nedenfor.
Eksporter filen i png-format, evt. med en @2x version og som en SVG-fil.
Implementer din cursor
Cursoren implementeres via CSS. Upload dine cursor-filer til dit website, og lav en css-selector, så alle links, knapper, input elementer mv. rammes. Skift derefter cursorens pointer ud med dine cursor-filer, som i følgende eksempel nedenfor.
/*Cursor*/
a, button,
.button,
input[type="button"]:hover,
input[type="submit"]:hover,
.nav-toggle {
cursor: url('imgs/cursor.png') 25 25, pointer;
cursor: url("imgs/cursor.svg") 25 25, pointer; /* FF */
cursor: -webkit-image-set(url("imgs/cursor.png") 1x, url("imgs/cursor@2x.png") 2x) 25 25, pointer; /* Webkit */
}Mere skal der ikke til for at skifte cursoren ud. Og det gør sitet lidt mere festligt for dine besøgende;-)
Har du lavet en flot cursor? Så smid et link til den i kommentarfeltet:-)
