Maison > Article > interface Web > Comment définir différents types de curseurs en utilisant CSS ?
Comment définir différents types de curseurs en utilisant CSS ?
- WBOYavant
- 2023-09-22 19:45:031527parcourir
CSS (Cascading Style Sheets) est un outil puissant pour concevoir l'apparence visuelle de votre site Web, y compris les styles de curseur. Le curseur est un aspect important de la conception Web. Il permet de fournir un retour visuel aux utilisateurs et leur permet d'interagir efficacement.
Qu'est-ce qu'un curseur ?
Le curseur est un indicateur de position qui indique l'emplacement actuel de l'utilisateur sur l'écran. Il est également connu sous le nom de « caret ». Il joue un rôle important dans la conception de l’interface utilisateur. En CSS, nous pouvons définir le curseur selon les besoins pour fournir un retour visuel à l'utilisateur indiquant quelles actions peuvent être effectuées à un emplacement spécifique.
Grammaire
css selector {
courser : courser type;
}
Nous allons maintenant explorer les différents types de curseurs pouvant être définis en utilisant CSS
Curseur par défaut
Dans la conception Web, le curseur par défaut est le type de curseur le plus courant, utilisé lorsqu'aucun autre curseur n'est spécifié. Cela ressemble à un pointeur en forme de flèche sur l'écran, indiquant que l'utilisateur peut cliquer sur l'élément.
Exemple 1
Voici un exemple de définition du curseur par défaut.
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
}
a {
cursor: default;
}
</style>
</head>
<body>
<h2>This is an example of default cursor</h2>
<a href="https://www.tutorialspoint.com/index.htm" class="my-link">Click Here</a>
</body>
</html>
Curseur de pointeur
Le curseur pointeur est représenté par une main pointant sur un lien. Lorsqu'un utilisateur survole un lien, cela indique que l'élément est cliquable. Nous pouvons utiliser le code suivant pour définir le curseur du pointeur −
css-elector {
cursor: pointer;
}
Curseur de texte
Le curseur de texte est une ligne horizontale ou verticale clignotante qui apparaît sous la forme d'un pointeur de curseur en forme de I. Lorsqu'un utilisateur survole du texte ou un champ de saisie de texte, cela indique qu'il a modifié ou sélectionné du texte. Nous pouvons utiliser le code suivant pour définir le curseur de texte -
css-elector {
cursor: text;
}
Curseur en croix
Le curseur en forme de croix apparaît simplement sous forme de lignes horizontales et verticales pour le pointeur en forme de croix. Le curseur en forme de croix est utilisé pour sélectionner une zone spécifique sur l'écran, comme dans les outils d'édition d'images. Nous pouvons définir le curseur en forme de croix en utilisant le code suivant -
css-elector {
cursor: crosshair;
}
Déplacer le curseur
Le curseur mobile apparaît à l'écran sous la forme de quatre pointeurs fléchés. Il est généralement utilisé pour faire glisser et déposer un élément pour indiquer qu'il peut être déplacé. Nous pouvons utiliser le code suivant pour définir le curseur en mouvement -
css-elector {
cursor: move;
}
Curseur non autorisé
Un curseur non autorisé signifie que l'opération demandée ne sera pas effectuée. Il se présente sous la forme d'un cercle avec des lignes diagonales. Nous pouvons utiliser le code suivant pour définir le curseur non autorisé -
css-elector {
cursor: not-allowed;
}
Curseur de progression
Le curseur de progression apparaît sous la forme d'un cercle tournant. Cela indique que le programme est occupé en arrière-plan, mais que l'utilisateur peut toujours interagir avec l'interface. Nous pouvons utiliser le code suivant pour définir le curseur de progression -
css-elector {
cursor: progress;
}
Attendez le curseur
Attendez que le curseur apparaisse comme un moulinet en rotation. Cela indique que le programme est occupé et incapable d'interagir avec l'interface utilisateur. Nous pouvons utiliser le code suivant pour définir le curseur d'attente -
css-elector {
cursor: wait;
}
Curseur d'aide
Le curseur d'aide apparaît sous la forme d'un point d'interrogation. Utilisé lorsque l'utilisateur a besoin d'aide, par exemple lorsqu'il clique sur une icône ou un bouton d'aide. Nous pouvons définir le curseur d'aide en utilisant le code suivant -
css-elector {
cursor: help;
}
Exemple 2
Voici un exemple de la façon de définir les différents types de curseurs en utilisant CSS.
<!DOCTYPE html>
<html>
<head>
<style>
body{
text-align:center;
background-color: lightgreen;
}
div{
margin: 3px;
padding: 5px;
}
</style>
</head>
<body>
<h2>Setting the different types of cursors using CSS</h2>
<h3>Move the mouse over the words to see the cursor change:</h3>
<div style="cursor:default">Default</div>
<div style="cursor:text">Text</div>
<div style="cursor:pointer">Pointer</div>
<div style="cursor:crosshair">Crosshair</div>
<div style="cursor:move">Move</div>
<div style="cursor:not-allowed">not-allowed</div>
<div style="cursor:progress">Progressd</div>
<div style="cursor:wait">wait</div>
<div style="cursor:help">help</div>
<div style="cursor:e-resize">e-resize</div>
<div style="cursor:ne-resize">ne-resize</div>
<div style="cursor:nw-resize">nw-resize</div>
<div style="cursor:n-resize">n-resize</div>
<div style="cursor:se-resize">se-resize</div>
<div style="cursor:sw-resize">sw-resize</div>
<div style="cursor:s-resize">s-resize</div>
<div style="cursor:w-resize">w-resize</div>
</body>
</html>
Personnalisez le curseur en utilisant CSS
En plus des curseurs standards fournis par CSS, nous pouvons également utiliser des curseurs personnalisés. En utilisant des curseurs personnalisés, nous pouvons ajouter une touche unique à notre site Web.
Exemple 3
Voici un exemple de création d'un curseur personnalisé en utilisant CSS.
<!DOCTYPE html>
<html>
<head>
<style>
body{
text-align: center;
}
.my-cursor {
width: 200px;
margin: auto;
background-color: lightblue;
cursor: url(https://cdn.icon-icons.com/icons2/1875/PNG/96/cursor_120340.png), auto;
}
</style>
</head>
<body>
<h2>Custom Cursors with CSS</h2>
<div class="my-cursor">
<h3>Move the mouse over to see the cursor change</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text </p>
</div>
</body>
</html>
Dans l'exemple ci-dessus, nous avons créé un élément div avec une classe de my-cursor. Nous définissons ensuite la propriété du curseur sur URL (. https://cdn.icon-icons.com/icons2/1875/PNG/96/cursor_120340.png), automatique. Cela signifie que le navigateur utilise le fichier curseur_120340.png comme curseur personnalisé et revient au curseur par défaut si le fichier n'est pas trouvé ou ne se charge pas.
Conclusion
Ici, nous avons discuté de différents types de curseurs CSS. Il s'agit d'un outil puissant permettant aux concepteurs Web de personnaliser les styles de curseur et de fournir un retour visuel sur les interactions des utilisateurs. En utilisant le code ci-dessus, nous pouvons définir différents types de curseurs en CSS.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!