9.1 Amélioration de l'interactivité avec les pseudo-classes
Les pseudo-classes et pseudo-éléments en CSS sont des outils puissants pour améliorer le design et l'expérience utilisateur (UX) sur les pages web. Ils permettent de créer des éléments interactifs et dynamiques, d'améliorer la perception visuelle et d'accroître l'accessibilité.
Voyons quelques exemples d'utilisation des pseudo-classes et pseudo-éléments à ces fins.
1. Survol du curseur
La pseudo-classe :hover permet de modifier le style d'un élément lorsque l'utilisateur le survole avec le curseur. C'est particulièrement utile pour les boutons et les liens.
Exemple : Changer la couleur du bouton lors du survol
Dans cet exemple, la couleur de fond du bouton change au survol du curseur, ce qui améliore le retour visuel et rend l'interface plus interactive :
button {
background-color: #3498db;
color: white;
border: none;
padding: 10px 20px;
cursor: pointer;
}
button:hover {
background-color: #2980b9;
}
<button>Click Me</button>
2. Focus sur un élément
La pseudo-classe :focus est utilisée pour styliser les éléments de formulaire lorsqu'ils sont au focus.
Cela aide les utilisateurs à voir quel élément de formulaire ils remplissent actuellement.
Exemple : Styliser le champ de saisie au focus
Dans cet exemple, le champ de saisie obtient une bordure bleue et une ombre au focus, ce qui améliore la visibilité de l'élément de formulaire actif :
input[type="text"] {
border: 1px solid #ccc;
padding: 10px;
}
input[type="text"]:focus {
border-color: #3498db;
box-shadow: 0 0 5px rgba(52, 152, 219, 0.5);
}
<input type="text">
3. État actif d'un élément
La pseudo-classe :active s'applique à un élément au moment de son activation (par exemple, lors de l'appui sur un bouton de souris).
Exemple : Styliser le bouton lors de l'appui
Dans cet exemple, le bouton se réduit légèrement et change de couleur lors de l'appui, créant un effet de pression :
button:active {
background-color: #2c3e50;
transform: scale(0.98);
}
<button>Click Me</button>
9.2 Amélioration visuelle avec les pseudo-éléments
4. Ajout de contenu : ::before et ::after
Les pseudo-éléments ::before et ::after permettent d'ajouter du contenu avant et après un élément, sans modifier le code HTML.
Exemple : Ajouter une icône avant un lien
Dans cet exemple, une icône est ajoutée avant le texte du lien, améliorant la perception visuelle et indiquant aux utilisateurs qu'il s'agit d'un lien :
a::before {
content: "🔗";
margin-right: 5px;
}
<a href="#">Here</a>
Exemple : Ajouter un élément décoratif après un paragraphe
Dans cet exemple, un élément décoratif est ajouté après un paragraphe, améliorant la mise en page visuelle de la page :
p::after {
content: "❦";
display: block;
text-align: right;
color: #e74c3c;
}
<p>Content</p>
5. Stylisation de la première lettre et ligne : ::first-letter et ::first-line
Les pseudo-éléments ::first-letter et ::first-line permettent de styliser la première lettre et
la première ligne de texte, créant des effets typographiques.
Exemple : Styliser la première lettre d'un paragraphe
Dans cet exemple, la première lettre du paragraphe est agrandie et colorée en bleu, créant un effet de "lettrine" souvent utilisé dans le design de magazines :
p::first-letter {
font-size: 2.5em;
font-weight: bold;
color: #3498db;
float: left;
margin-right: 0.1em;
}
<p>Content</p>
Exemple : Styliser la première ligne d'un paragraphe
Dans cet exemple, la première ligne du paragraphe est mise en gras et en vert, améliorant la lisibilité du texte :
p::first-line {
font-weight: bold;
color: #2ecc71;
}
<p>Content</p>
9.3 Amélioration de l'accessibilité avec les pseudo-classes et pseudo-éléments
6. État des éléments du formulaire
Les pseudo-classes de formulaire permettent de styliser les éléments en fonction de leur état, améliorant l'accessibilité et l'interface utilisateur.
Exemple : Styliser la case à cocher sélectionnée
Dans cet exemple, la case à cocher sélectionnée est colorée en vert, ce qui améliore le retour visuel :
input[type="checkbox"]:checked {
background-color: #2ecc71;
}
<input type="checkbox" checked>
Exemple : Styliser un champ de saisie désactivé
Dans cet exemple, le champ de saisie désactivé obtient un fond gris clair et un texte en gris, indiquant visuellement son indisponibilité :
input:disabled {
background-color: #f0f0f0;
color: #999;
}
<input type="text" disabled>
Exemple : Styliser un champ de saisie incorrect
Dans cet exemple, un champ de saisie incorrect obtient une bordure rouge, aidant les utilisateurs à identifier les erreurs de saisie :
input:invalid {
border-color: #e74c3c;
}
<input type="text">
9.4 Exemple de mise en œuvre complète
/* Ajout d'une icône avant un lien */
a::before {
content: "🔗";
margin-right: 5px;
}
/* Styliser la première lettre d'un paragraphe au survol du curseur */
p:hover::first-letter {
font-size: 2.5em;
font-weight: bold;
color: #3498db;
}
/* Styliser le bouton */
button {
background-color: #3498db;
color: white;
border: none;
padding: 10px 20px;
cursor: pointer;
}
button:hover {
background-color: #2980b9;
}
button:active {
background-color: #2c3e50;
transform: scale(0.98);
}
/* Styliser le champ de saisie au focus */
input[type="text"]:focus,
input[type="email"]:focus {
border-color: #3498db;
box-shadow: 0 0 5px rgba(52, 152, 219, 0.5);
}
/* Styliser la case à cocher sélectionnée */
input[type="checkbox"]:checked {
background-color: #2ecc71;
}
/* Styliser le champ de saisie désactivé */
input:disabled {
background-color: #f0f0f0;
color: #999;
}
/* Styliser le champ de saisie incorrect */
input:invalid {
border-color: #e74c3c;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exemples d'utilisation des pseudo-classes et pseudo-éléments</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<a href="#">Lien avec icône</a>
<p>Survole ce paragraphe pour voir l'effet sur la première lettre.</p>
<button>Bouton</button>
<form>
<label>
Entrez du texte :
<input type="text" required>
</label>
<br>
<label>
Entrez un email :
<input type="email" required>
</label>
<br>
<label>
<input type="checkbox" checked> Case à cocher
</label>
<br>
<button type="submit">Envoyer</button>
<button type="button" disabled>Bouton désactivé</button>
</form>
</body>
</html>
Les pseudo-classes et pseudo-éléments offrent des moyens puissants pour améliorer le design et l'expérience utilisateur sur les pages web. Leur utilisation permet de créer des éléments interactifs et dynamiques, d'améliorer la perception visuelle, d'accroître l'accessibilité et de rendre les interfaces plus conviviales et agréables pour les utilisateurs.
Comprendre et bien utiliser ces outils ouvre de nombreuses possibilités pour créer des designs web modernes et efficaces.
GO TO FULL VERSION