Che cos'è un cursore personalizzato?

Un cursore personalizzato è un puntatore del mouse definito dall'utente che sostituisce la freccia predefinita del browser o l'icona del puntatore. I siti web e le applicazioni utilizzano cursori personalizzati per rafforzare il branding, migliorare l'immersione nei giochi o nelle esperienze creative, o semplicemente aggiungere un tocco visivo unico a un'interfaccia. I cursori personalizzati sono generalmente definiti in CSS utilizzando la proprietà cursor con un valore url() che punta a un file di immagine come .cur, .png o .svg.

I browser web supportano nativamente diversi formati di file cursore. Il formato .cur è il classico formato cursore di Windows, .ani aggiunge il supporto all'animazione, mentre .png e .svg offrono alternative moderne e indipendenti dalla risoluzione che funzionano su tutte le piattaforme.

Descrizione dello strumento

Il Custom Cursor Tester ti consente di caricare qualsiasi file cursore e visualizzare istantaneamente come appare e si comporta nel browser. Una volta caricato, il tuo cursore sostituisce il puntatore predefinito all'interno di un'area di test dedicata — un viewport a scacchiera con un pulsante — in modo da poter valutare sia il movimento nello spazio libero che il comportamento al passaggio del mouse senza scrivere una sola riga di CSS.

Formati supportati

Formato Descrizione
.cur Formato cursore Windows, ampiamente supportato
.ani Cursore Windows animato
.png Immagine raster, ideale per cursori di qualità
.svg Immagine vettoriale scalabile, nitida a qualsiasi dimensione
.ico Formato icona Windows, utilizzabile anche come cursore

Funzionalità

  • Anteprima istantanea: Il cursore viene applicato in tempo reale non appena il file viene caricato — non è necessario ricaricare la pagina
  • Area di test interattiva: Il viewport a scacchiera mostra il cursore su uno sfondo neutro per una visibilità chiara
  • Target pulsante di test: Un pulsante all'interno dell'area di test ti consente di verificare il comportamento del cursore su elementi interattivi
  • Eredità cursore coerente: Il pulsante eredita il cursore personalizzato piuttosto che ripristinare il valore predefinito del browser
  • Solo lato client: I file vengono letti direttamente nel browser e non vengono mai caricati su alcun server

Casi d'uso

  • Progettisti di cursori: Verifica come appare un file cursore .cur o .png appena creato prima di distribuirlo
  • Sviluppatori web: Testa rapidamente una risorsa cursore prima di integrarla in CSS con la proprietà cursor: url(...)
  • Sviluppatori di giochi e creativi: Controlla l'aspetto e la visibilità dei puntatori personalizzati nei contesti dell'interfaccia utente interattiva

Come funziona

Quando carichi un file, lo strumento crea un URL oggetto per esso utilizzando l'API URL.createObjectURL() del browser e lo inietta come stile CSS cursor nell'area di test. Questo è equivalente a scrivere cursor: url(your-file.cur), auto in un foglio di stile. Il fallback auto assicura che il browser utilizzi il cursore predefinito se il file non può essere caricato o analizzato.

Suggerimenti

  • Per i cursori .png, il browser utilizza l'angolo in alto a sinistra (0 0) come hotspot per impostazione predefinita. Se il punto attivo del tuo cursore dovrebbe trovarsi altrove (ad es. la punta di una matita), potrebbe essere necessario regolarlo nel tuo CSS dopo il test.
  • I cursori .ani animati vengono riprodotti automaticamente nei browser che li supportano (principalmente basati su Chromium).
  • I cursori SVG devono essere piccoli (generalmente sotto 128×128 px) per essere renderizzati correttamente come cursori nella maggior parte dei browser.