Curseur CSS personnalisé

Curseur Css Personnalise



Le curseur indique la position sur l'écran où l'utilisateur peut cliquer ou saisir du texte. Il peut y avoir différents curseurs utilisés pour différents composants de site Web. Un développeur doit s'assurer que les curseurs utilisés dans l'application doivent être attractifs. Par exemple, un curseur de main pointant peut être utilisé sur le bouton au survol de la souris. L'indicateur de texte (ligne clignotante) est utilisé sur la zone de texte où le texte doit être saisi.

Il existe plusieurs styles de curseur en CSS utilisés en spécifiant simplement la valeur de la propriété du curseur. Cependant, un développeur peut créer un curseur personnalisé à l'aide de CSS.





Ce guide d'étude fournira sur:



    • Curseur CSS
    • Curseur personnalisé CSS

Avant d'entrer dans le sujet, voyons quelques-unes des formes de curseur CSS avec un exemple pratique.



Curseur CSS

Le SSC ' le curseur ” La propriété a différentes valeurs, telles qu'un pointeur, aucun, progression, etc. Créons un tableau qui contient des lignes sur lesquelles différents curseurs seront affichés au survol de la souris.



Exemple : Création d'un tableau représentant différents curseurs CSS en HTML

Tout d'abord, ajoutez l'élément

en HTML. A l'intérieur de cet élément :



    • La balise
sera utilisée pour créer des lignes.
  • La première ligne contient les titres.
  • Ces en-têtes sont spécifiés en utilisant les balises
    • contiennent deux balises
    . Les autres balises
    pour remplir les colonnes avec des données.
  • La deuxième balise
    		• représente les éléments du bouton qui sont appliqués avec un CSS ' le curseur ” propriété avec des valeurs différentes.

    Le code HTML pour le scénario ci-dessus est donné ci-dessous :

    < table >
    < tr >
    < e style = 'largeur : 200px ;' > sélecteur de curseur css e >
    < e style = 'largeur : 200px ;' > style de curseur e >
    tr >
    < tr >
    < td > curseur : pointeur td >
    < td >< bouton style = 'curseur : pointeur ;' > aiguille bouton > td >
    tr >
    < tr >
    < td > curseur : progression td >
    < td >< bouton style = 'curseur : progression ;' > le progrès bouton > td >
    tr >
    < tr >
    < td > curseur : non autorisé td >
    < td >< bouton style = 'curseur : non autorisé ;' > interdit bouton > td >
    tr >
    < tr >
    < td > curseur : aucun td >
    < td >< bouton style = 'curseur : aucun ;' > rien bouton > td >
    tr >
    < tr >
    < td > curseur : déplacer td >
    < td >< bouton style = 'curseur : déplacer ; » > mouvement bouton > td >
    tr >
    < tr >
    < td > curseur : saisir td >
    < td >< bouton style = 'curseur : saisir ;' > attraper bouton > td >
    tr >
    < tr >
    < td > curseur : copier td >
    < td >< bouton style = 'curseur : copier ;' > copie bouton > td >
    tr >
    < tr >
    < td > curseur : col-resize td >
    < td >< bouton style = 'curseur : redimensionnement en col ;' > col-redimensionner bouton > td >
    tr >
    < tr >
    < td > curseur : redimensionner la ligne td >
    < td >< bouton style = 'curseur : redimensionnement de ligne ;' > redimensionnement de ligne bouton > td >
    tr >
    < tr >
    < td > curseur : texte td >
    < td >< bouton style = 'curseur : texte ;' > texte bouton > td >
    tr >
    table >


    Le code ci-dessus générera le résultat suivant :


    Dans la section suivante, nous appliquerons différents styles aux éléments HTML.

    Style 'tous' les éléments

    * {
    rembourrage: 0 ;
    marge: 0 ;
    famille de polices : Arial, Helvetica, sans empattement ;
    }


    Tous les éléments HTML sont appliqués avec des styles CSS qui sont expliqués ci-dessous :

      • ' rembourrage « propriété avec » 0 ” La valeur n'inclut aucun espace autour du contenu de l'élément.
      • ' marge « propriété avec » 0 ” La valeur n'ajoute aucun espace en dehors de chacun des éléments.
      • ' famille de polices « la propriété se voit attribuer une valeur » Arial, Helvetica, sans empattement ”. La liste des styles de police est donnée pour s'assurer que si le premier style n'est pas supporté par le navigateur, d'autres styles doivent être appliqués.

    Élément de style 'tableau'

    table {
    marge : 0px automatique ;
    bordure : 1px solide gainsboro ;
    }


    L'élément de tableau HTML est appliqué avec les propriétés CSS décrites ci-dessous :

      • ' frontière ' la propriété est définie avec la valeur ' 1px solide gainsboro ” qui représente respectivement la largeur, le style et la couleur de la bordure.

    ' marge ” La propriété se comporte comme spécifié ci-dessus.

    Élément de style 'td'

    td {
    aligner le texte : centrer ;
    }


    L'élément

    		est appliqué avec la propriété ' aligner le texte ' avec la valeur ' centre ”. Cela alignera le texte de la colonne au centre.

    Élément de style 'bouton'

    bouton {
    couleur de fond : bleu cadet ;
    rembourrage : 10px 10px ;
    Couleur: #ffffff;
    largeur : 150 pixels ;
    }


    L'élément de bouton utilisé dans le code HTML ci-dessus est stylé avec de nouvelles propriétés CSS qui sont expliquées ci-dessous :

      • ' Couleur de l'arrière plan ” spécifie la couleur de l'arrière-plan de l'élément.
      • ' rembourrage ' avec les valeurs assignées comme ' 10px 10px ' ajoute un espace de 10px en haut en bas et de 10px sur les côtés gauche-droit des éléments de l'élément.
      • ' Couleur ” ajuste la couleur de police de l'élément.
      • ' largeur ' est la propriété qui ajuste la largeur de l'élément.

    Le code ci-dessus générera le résultat suivant :


    Jusqu'à présent, nous avons discuté des curseurs fournis par CSS. Dans la prochaine section, l'exemple décrira comment créer un curseur personnalisé avec CSS.

    Curseur personnalisé CSS

    Les développeurs doivent utiliser des curseurs adaptés à leurs applications. Les curseurs doivent être rendus attrayants pour attirer l'attention des utilisateurs. De plus, le curseur personnalisé peut être créé à cet effet.

    Regardez l'exemple ci-dessous !

    Exemple : Comment créer un curseur personnalisé avec CSS ?

    En HTML, ajoutez deux éléments div. Ne faire qu'un avec la classe » cercle ' et l'autre avec la classe ' point ”.

    HTML

    < div classe = 'cercle' > div >
    < div classe = 'point' > div >


    Avançons vers la section CSS.

    Élément de style 'corps'

    corps {
    hauteur : 100vh ;
    }


    L'élément body du fichier HTML est appliqué avec le style ' la taille ” propriété pour définir la hauteur de l'élément.

    Style 'cercle' div

    .cercle {
    largeur : 20px ;
    hauteur : 20px ;
    bordure : 2 pixels blancs solides ;
    border-radius : cinquante % ;
    }


    Vous trouverez ci-dessous l'explication des propriétés CSS qui sont appliquées à l'élément div ayant la classe ' cercle ” :

      • ' largeur ” La propriété ajuste la largeur de l'élément.
      • ' frontière ” propriété avec la valeur spécifiée comme “ 2px blanc solide ” représente la largeur, le style et la couleur de la bordure.
      • ' rayon de bordure ” La propriété modifie la bordure de l'élément.

    Style 'point' div

    .point {
    largeur : 5px ;
    hauteur : 5px ;
    couleur de fond : blanc ;
    border-radius : cinquante % ;
    }


    L'élément div avec point de classe est fourni avec différentes propriétés qui sont décrites ci-dessous :

      • ' Couleur de l'arrière plan ” propriété spécifie la couleur de fond de l'élément.
      • ' rayon de bordure ' arrondit les bords de l'élément.
      • D'autres propriétés fonctionneront comme indiqué.

    Le code donné affichera le curseur suivant sur la page Web :


    Nous avons créé le curseur en utilisant HTML et CSS. Maintenant, dans la section suivante, le code JavaScript est écrit pour ajouter la fonctionnalité requise au curseur.

    Javascript

    < scénario >
    const curseurCircle = document.querySelector ( '.cercle' ) ;
    const curseurPoint = document.querySelector ( '.point' ) ;
    const moveCurseur = ( et ) = > {
    const mouseY = e.clientY ;
    const sourisX = e.clientX ;

    curseurCircle.style.transform = ` Traduire ( ${mouseX} pixels, ${mouseY} pixels ) ` ;
    curseurPoint.style.transform = ` Traduire ( ${mouseX} pixels, ${mouseY} pixels ) ` ;
    }
    window.addEventListener ( 'déplacer la souris' , déplacerCurseur )
    scénario >


    La description du code JavaScript ci-dessus est donnée ci-dessous :

      • ' , qui est utilisée pour écrire du code JavaScript.
      • ' constante ” indique que le mot-clé const suivi d'une variable ne peut pas être réaffecté.
      • ' document.querySelector(‘.cercle’) ” renvoie l'élément div du cercle qui correspond au sélecteur spécifié dans le document.
      • ' document.querySelector(‘.point’) ” renvoie l'élément point div qui correspond au sélecteur spécifié dans le document.
      • ' const moveCursor = (e) => ” cette fonction spécifie la fonction du curseur.
      • ' e.clientY ” renvoie la coordonnée verticale lorsque l'événement de souris a été déclenché.
      • ' e.clientX ” renvoie la coordonnée horizontale lorsque l'événement de souris est déclenché.
      • ' curseurCircle.style.transform ” le cercle div est appliqué avec une transformation de style.
      • ' curseurPoint.style.transform ” le point div est appliqué avec la transformation de style.
      • ' traduire(${mouseX}px, ${mouseY}px) ” La valeur de la propriété transform définit les coordonnées horizontales et verticales.
      • ' window.addEventListener('mouse', moveCursor) ' La méthode d'écoute d'événement écoutera le mouvement de la souris. Il fait partie de l'objet fenêtre global.

    Après avoir fourni les blocs de code ci-dessus, le curseur se déplacera automatiquement sur l'écran comme indiqué ci-dessous :


    C'est super! Nous avons créé un curseur personnalisé avec différentes propriétés CSS.

    Conclusion

    Le SSC ' le curseur ” a de nombreuses valeurs qui indiquent différents styles de curseur. Cependant, en utilisant les éléments HTML et les propriétés CSS, nous pouvons créer des curseurs personnalisés. Ensuite, du code JavaScript est implémenté pour activer sa fonctionnalité. Cette étude a démontré comment créer des curseurs CSS personnalisés avec un exemple pratique.

    Autre

    Catégorie

    Articles Populaires

    Comment ajouter une bordure inférieure à la ligne du tableau ?

    Comment réinitialiser/réinstaller Microsoft Store sous Windows ?

    Salesforce Apex – Liste

    Comment créer une image pour une application Java à l'aide d'un fichier Docker

    Avoir une clause en SQL

    Comment mettre au carré chaque élément d'un vecteur dans MATLAB

    Comment couper une chaîne après un caractère spécifique en JavaScript

    Écart type des pandas

    Comment trier un tableau 2d en Java

    Comment redémarrer Docker sans arrêter les conteneurs ?

    Comment implémenter une boucle _ForEach_ en Python

    Qu'est-ce que le mot-clé privé Java

    C++ Getchar

    10 exemples de boucles Bash sympas et géniaux

    Comment faire une bannière arc-en-ciel dans Minecraft

    Qu'est-ce que System.Array en C#

    Comment utiliser l'instruction Select dans Golang ?

    Guide pour styliser le texte à l'aide de Tailwind CSS

    Lier Asana à Salesforce

    Correction des erreurs de connexion vocale Discord sous Windows 11/10