10.1 Propriété cursor
Le CSS offre la possibilité de modifier l'apparence du curseur lorsqu'il survole des éléments à l'aide de la propriété cursor.
Cette propriété permet de définir différents types de curseurs, améliorant ainsi l'interactivité et l'attrait visuel des pages web.
La propriété cursor définit l'apparence du curseur de la souris lorsqu'il est au-dessus d'un élément. Les valeurs peuvent être
prédéfinies ou des images personnalisées.
Syntaxe :
element {
cursor: value;
}
Valeurs :
La propriété cursor supporte de nombreuses valeurs, qui peuvent être divisées en prédéfinies et personnalisées.
Valeurs prédéfinies :
default: curseur par défautpointer: curseur en forme de main, généralement utilisé pour les lienstext: curseur en forme de I pour le texte, généralement utilisé pour les champs de textemove: curseur pour le déplacementwait: curseur en forme de sablier ou d'indicateur d'attentehelp: curseur en forme de point d'interrogationcrosshair: curseur en croixnot-allowed: curseur en signe d'interdiction (cercle barré)grabetgrabbing: curseurs pour le glissement d'éléments
Exemple d'utilisation des valeurs prédéfinies :
.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">Curseur par défaut</div>
<div class="pointer-cursor">Curseur pointeur</div>
<div class="text-cursor">Curseur texte</div>
10.2 Valeurs personnalisées (curseurs personnalisés)
La propriété cursor supporte également l'utilisation d'images personnalisées comme curseurs.
Pour cela, on utilise la valeur url.
Syntaxe :
element {
cursor: url("custom-cursor.png"), fallback;
}
Où :
url('custom-cursor.png'): spécifie le chemin vers l'image du curseurfallback: une valeur prédéfinie qui est utilisée si l'image personnalisée ne peut être chargée
Exemple d'utilisation de curseurs personnalisés :
.custom-cursor {
cursor: url('https://via.placeholder.com/32'), auto;
padding: 10px;
border: 1px solid black;
}
<body>
<div class="custom-cursor">Curseur personnalisé</div>
</body>
Spécifications et limitations pour les curseurs personnalisés :
- Formats d'image : les formats supportés sont
.cur,.png,.jpg,.gif. - Tailles des images : il est recommandé d'utiliser des images de 32x32 pixels ou moins pour de meilleures performances et compatibilité.
- Coordonnées du point de clic : il est possible de définir les coordonnées du point de clic (hotspot) dans l'image du curseur. Par défaut, c'est le coin supérieur gauche (0,0).
10.3 Détails sur l'utilisation des curseurs personnalisés
Formats d'image
Les curseurs personnalisés peuvent être dans divers formats, tels que PNG, GIF, JPG et SVG. Il est recommandé d'utiliser des formats supportant la transparence (par ex. PNG) pour que le curseur apparaisse correctement sur n'importe quel arrière-plan.
Tailles des images
Les images des curseurs ne doivent pas être trop grandes. Les tailles recommandées sont de 32x32 pixels ou moins. Les grandes images peuvent ne pas s'afficher correctement dans certains navigateurs.
Spécification des coordonnées du focus
Les coordonnées du focus (hotspot) du curseur peuvent être spécifiées à l'aide de valeurs supplémentaires après l'URL de l'image.
Syntaxe
element {
cursor: url("custom-cursor.png") x y, fallback;
}
Où :
xety: coordonnées du focus par rapport au coin supérieur gauche de l'image.
Exemple d'utilisation avec coordonnées du 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">Curseur personnalisé avec focus</div>
</body>
Explication du code :
.custom-cursor-focus: définit un curseur personnalisé avec des coordonnées de focus (16, 16), ce qui rend le centre de l'image le point chaud
Application pratique :
- Amélioration UI/UX : l'utilisation de curseurs personnalisés peut considérablement améliorer l'interface utilisateur, la rendant plus intuitive et esthétiquement plaisante.
- Éléments interactifs : les curseurs personnalisés peuvent être appliqués aux éléments interactifs tels que les boutons, les liens, les icônes, etc.
- Jeux et applications : dans les jeux et applications web, les curseurs personnalisés aident à créer un style et une atmosphère uniques.
GO TO FULL VERSION