CSS | curseur en français
Introduction à la propriété CSS cursor
La propriété cursor détermine l'apparence du curseur de la souris lorsqu'il survole un élément sur une page web. Par défaut, le type de curseur peut être spécifié par des mots-clés définis ou en ajoutant une image personnalisée. Lorsqu'une image est utilisée, il est également possible de définir des images de secours (fallback) avec un mot-clé final obligatoire.
Syntaxe de la Propriété cursor
La propriété cursor peut être assignée avec un mot-clé spécifique :
cursor: keyword;Elle peut également accepter une ou plusieurs URL :
cursor: url(cursor_image), url(fallback_cursor_image), keyword;Si l'image principale (cursor_image) ne se charge pas, une image de secours (fallback_cursor_image) peut être utilisée. En cas d'échec de toutes les images, le mot-clé sera appliqué comme option de dernier recours.
Mots-clés Courants pour la Propriété cursor
Voici quelques mots-clés fréquemment utilisés pour définir le type de curseur :
| Mot-clé | Curseur d'exemple | Description | |------------------|-----------------------|------------------------------------------------------| | auto | Détermine automatiquement le curseur selon le contexte.| | none | Aucun curseur n’est affiché. | | default | Le curseur système par défaut, généralement une flèche.| | context-menu | Indique qu'un menu contextuel est disponible. | | help | Indique que des informations d'aide sont disponibles.| | pointer | Utilisé pour indiquer un lien. | | progress | Le système est occupé en arrière-plan mais l'interaction est autorisée.| | wait | Le système est occupé et l'interaction n'est pas autorisée.| | cell | Indique qu'une cellule de tableau peut être sélectionnée.| | crosshair | Utilisé pour marquer des sélections dans une image. | | text | Indique que le texte est éditable. | | vertical-text | Indique que le texte vertical est éditable. |
Exemple d'Utilisation
Dans l'exemple suivant, une main pointant apparaîtra lorsque le curseur passe au-dessus du paragraphe :
Le curseur pointe vers ce paragraphe !
Conclusion et Applications
La propriété cursor est un outil précieux pour améliorer l'expérience utilisateur sur votre site web. En personnalisant le curseur, vous pouvez indiquer des actions possibles ou rendre votre site plus interactif. Utiliser des curseurs adaptés peut aider à conduire l'utilisateur et à rendre l'interface plus intuitive.
Utilisation de cursor pour créer des sites web et des startups
Si vous êtes en train de concevoir un site web ou une application pour votre startup, envisagez d'utiliser des curseurs personnalisés pour renforcer l'identité de votre marque. Par exemple, un curseur en forme de logo lorsque l'utilisateur survole votre bouton d'appel à l'action peut créer une interaction unique. Cela permet non seulement de diriger l'attention des utilisateurs, mais également de rendre l'expérience de navigation plus agréable.