Modifier le curseur en CSS

CSS : personnaliser le curseur

La propriété CSS cursor permet de personnaliser le curseur au survol de la souris. Une page web récapitule les différentes valeurs de cette propriété sous forme de cheat sheet.

Personnaliser le curseur en CSS

Grâce aux CSS, on peut modifier l’apparence de nombreux éléments d’une pages web : textes, liens, formulaires, etc. Parmi ces éléments, il y en a un en particulier auquel on touche rarement, mais qu’il peut être parfois très utile de personnaliser, c’est le curseur de la souris. En effet, la plupart du temps la valeur par défaut correspond à la meilleure option pour une expérience utilisateur maximale : la main qui pointe son index au survol d’un lien, le curseur de texte pour les zones de saisie, etc.

Mais parfois, dans certains cas précis, il peut être nécessaire de modifier l’apparence du curseur. Pour identifier les zones déplaçables, zoomables ou modifiables par exemple, ou bien encore lors de la réalisation d’un jeu en HTML. Cette personnalisation de curseur en CSS se fait via la propriété cursor. La propriété peut prendre plusieurs valeurs pour afficher un curseur « système », comme un curseur d’aide, d’attente ou de zoom mais il est également possible de personnaliser totalement le curseur à l’aide d’un fichier image.

Les différentes valeurs de la propriété cursor

L’ensemble des valeurs que peut prendre la propriété cursor ont été rassemblées sous forme visuelle par Chris Nager, développeur new yorkais sur cette page :

http://chrisnager.github.io/cursors/

Bon, ok, ça ressemble quand même beaucoup à ça :

http://css-tricks.com/almanac/properties/c/cursor/

 

 

 

 

 

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *