Personnalisez votre curseur de souris facilement avec CSS Cursor et Cursor Editor

Le 22/01/2016

Dans Webdesign

Pour bien finir la semaine, nous vous proposons la découverte de deux services en ligne qui pourront vous aider à personnaliser votre curseur de souris facilement et donner à vos projets web une touche d'originalité. 

Le guide pratique CSS Cursor

Le premier site reste simple, car il vous permet de voir les différentes possibilités de personnalisation pour votre curseur avec une simple ligne CSS. Pour découvrir les changements de la souris, il vous suffit de survoler la case qui correspond. Le site propose 36 curseurs différents avec la compatibilité pour chaque navigateur. 

Le site : css-cursor.techstream.org

Réalisez vous-même votre curseur avec Cursor Editor

Ce deuxième site vous permet une personnalisation plus avancée, avec la possibilité de dessiner vous-même votre curseur de souris ou d'importer une image directement de votre ordinateur. Une fois le dessin réalisé, vous pouvez télécharger votre joli cursor et le mettre dans votre projet web avec cette petite ligne en css : body{ cursor: url('cursor.cur'), auto;}.

Nous avons pu tester ce service, techniquement si vous êtes sur ordinateur la souris est devenu le logo du BlogDuWebdesign si vous survolez le contenu de l'article. Petit détail qui a son importance, il faut commencer le dessin en haut à gauche de la grille, sur l'icône du '+', c'est ici que commence le sélecteur de la souris. Essayez de sélectionner du texte avec notre curseur, vous pourrez voir un décalage qui n'est pas très pratique. 

À vous de jouer sur : www.cursor.cc

Pour terminer, une petite image qui regroupe l'ensemble des curseurs de souris.