10.1 Proprietà cursor
CSS offre la possibilità di cambiare l'aspetto del cursore quando si passa sugli elementi tramite la proprietà cursor. Questa proprietà consente di impostare diversi tipi di cursori, migliorando l'interattività e l'aspetto visivo delle pagine web.
La proprietà cursor definisce l'aspetto del cursore del mouse quando si trova sopra un elemento. I valori possono essere predefiniti o immagini personalizzate.
Sintassi:
element {
cursor: value;
}
Valori:
La proprietà cursor supporta molti valori, che possono essere divisi in predefiniti e personalizzati.
Valori predefiniti:
default: cursore predefinitopointer: cursore a forma di mano, solitamente utilizzato per i linktext: cursore a forma di testo (a forma di I), solitamente utilizzato per campi di testomove: cursore per spostamentowait: cursore a forma di clessidra o indicatore di attesahelp: cursore a forma di punto interrogativocrosshair: cursore a forma di mirinonot-allowed: cursore a forma di segnale di divieto (cerchio barrato)grabegrabbing: cursori per trascinare gli elementi
Esempio di utilizzo di valori predefiniti:
.default-cursor {
cursor: default;
padding: 10px;
border: 1px solid black;
}
.pointer-cursor {
cursor: pointer;
padding: 10px;
border: 1px solid black;
}
.text-cursor {
cursor: text;
padding: 10px;
border: 1px solid black;
}
<div class="default-cursor">Cursore predefinito</div>
<div class="pointer-cursor">Cursore puntatore</div>
<div class="text-cursor">Cursore testo</div>
10.2 Valori personalizzati (cursori personalizzati)
La proprietà cursor supporta anche l'uso di immagini personalizzate come cursori. Per questo si utilizza il valore url.
Sintassi:
element {
cursor: url("custom-cursor.png"), fallback;
}
Dove:
url('custom-cursor.png'): indica il percorso dell'immagine del cursorefallback: valore predefinito utilizzato se l'immagine personalizzata non può essere caricata
Esempio di utilizzo di cursori personalizzati:
.custom-cursor {
cursor: url('https://via.placeholder.com/32'), auto;
padding: 10px;
border: 1px solid black;
}
<body>
<div class="custom-cursor">Cursore personalizzato</div>
</body>
Specifiche e limitazioni per i cursori personalizzati:
- Formato delle immagini: sono supportati i formati
.cur,.png,.jpg,.gif. - Dimensioni delle immagini: si consiglia di utilizzare immagini di 32x32 pixel o meno per una migliore performance e compatibilità.
- Coordinate del punto di clic: nell'immagine del cursore è possibile impostare le coordinate del punto di clic (hotspot). Per impostazione predefinita è l'angolo in alto a sinistra (0,0).
10.3 Dettagli sull'utilizzo di cursori personalizzati
Formati delle immagini
I cursori personalizzati possono essere in vari formati, come PNG, GIF, JPG e SVG. Si raccomanda di utilizzare formati con supporto alla trasparenza (ad es., PNG) affinché il cursore appaia correttamente su qualsiasi sfondo.
Dimensioni delle immagini
Le immagini del cursore non devono essere troppo grandi. Le dimensioni raccomandate sono 32x32 pixel o meno. Immagini grandi potrebbero non essere visualizzate correttamente in alcuni browser.
Indicazione delle coordinate del focus
È possibile specificare le coordinate del focus (hotspot) del cursore con valori aggiuntivi dopo l'URL dell'immagine.
Sintassi
element {
cursor: url("custom-cursor.png") x y, fallback;
}
Dove:
xey: coordinate del focus rispetto all'angolo in alto a sinistra dell'immagine.
Esempio di utilizzo con coordinate del focus:
.custom-cursor-focus {
cursor: url('https://via.placeholder.com/32') 16 16, auto;
padding: 10px;
border: 1px solid black;
}
<body>
<div class="custom-cursor-focus">Cursore personalizzato con focus</div>
</body>
Spiegazione del codice:
.custom-cursor-focus: imposta un cursore personalizzato con coordinate del focus (16, 16), facendo diventare il centro dell'immagine il punto caldo
Applicazioni pratiche:
- Miglioramento UI/UX: l'utilizzo di cursori personalizzati può migliorare notevolmente l'interfaccia utente, rendendola più intuitiva e esteticamente gradevole.
- Elementi interattivi: i cursori personalizzati possono essere applicati ad elementi interattivi, come pulsanti, link, icone, ecc.
- Giochi e applicazioni: nei giochi e nelle applicazioni web, i cursori personalizzati aiutano a creare uno stile e un'atmosfera unici.
GO TO FULL VERSION