La plupart des sites Web modernes utilisent des feuilles de style en cascade (CSS). Certains sites utilisent des fonctionnalités CSS de base, tandis que d'autres utilisent des fonctionnalités avancées pour rendre leurs applications Web plus attrayantes.
L'ajout d'effets accrocheurs peut améliorer le taux de clics sur votre site Web, inciter les utilisateurs à agir ou même augmenter le temps que les utilisateurs passent sur votre site Web.
Dans cet article, nous discuterons de ce que sont les effets de survol CSS, comment ils peuvent rendre votre site Web accrocheur, comment vous pouvez implémenter ces effets et donner des exemples de sites Web qui implémentent des effets de survol CSS élégants.
Qu'est-ce que l'effet de survol CSS ?
L'effet de survol CSS se produit lorsqu'un utilisateur du site Web survole un élément à l'aide de son curseur (pointeur de la souris). Le résultat peut être un changement de couleur, de texte ou d'autres effets animés. De tels effets sont ajoutés à un site Web pour améliorer l'interactivité et le rendre plus navigable.
Les effets de survol CSS peuvent apparaître sous forme de transitions ou animations.
Transitions
Ces effets vous permettent de modifier l'apparence ou le comportement d'un élément sur une page Web. Cependant, il doit y avoir un déclencheur, tel qu'un utilisateur survolant un élément spécifique. Les transitions passent de l'état initial à l'état final après le déclenchement. Une transition ne s'exécute qu'une seule fois et ne vous permet pas de spécifier des points intermédiaires.
Animations
Ces effets ont des images clés, qui leur permettent de se répéter, de boucler et de passer de l'état initial à l'état final. Ces effets ont également un état intermédiaire. Une image clé indique le rendu des éléments animés à un moment donné de la séquence d'animation.
Types d'effets de survol CSS
Les effets de survol CSS peuvent être appliqués au texte, aux images, aux vidéos, aux liens ou aux boutons. Voici quelques-unes des principales applications :
# 1. Effets de survol de texte
De tels effets conviennent lorsque vous souhaitez créer un site Web minimaliste. Le design doit être simple tout en faisant passer le message. Il peut prendre les formes suivantes :
- Effet de texte terminal: Cet effet imite la frappe sur un traitement de texte. Les mots clignoteront, mais la vitesse doit être suffisamment bonne pour permettre aux utilisateurs de lire.
- Animation textuelle : Le texte dans cet effet peut être aligné vers le haut, vers le bas ou sur les côtés.
# 2. Effets de survol de lien
Un site Web typique aura divers hyperliens qui redirigent les utilisateurs vers différentes pages. Ces liens continuent d'augmenter à mesure que le site Web se développe. Les effets de survol de lien peuvent se présenter sous ces formes ;
- Changer la couleur du lien : La couleur du lien de quelque chose comme le bleu au rouge.
- Changer la couleur de fond : Cet effet change la couleur de fond du lien.
- Échange de texte : Cet effet modifie le contenu de l'icône de lien.
# 3. Effets de survol des boutons
Les boutons sont importants dans les sites Web car ils nous permettent de soumettre des formulaires et d'accéder à différentes sections d'une page Web. Les effets de survol sur les boutons peuvent être implémentés sous la forme de :
- Changement de couleur du texte : La couleur du texte sur un bouton qui dit "Cliquez-moi" peut passer du rouge au vert au survol.
- Changer la couleur de fond : Les boutons HTML sont transparents par défaut. Les développeurs peuvent ajouter une couleur d'arrière-plan à ces boutons. En survol, la couleur d'arrière-plan peut passer de quelque chose comme le marron au vert.
- Effet rebond : Vous pouvez ajouter un attrait visuel à l'utilisateur en concevant le bouton pour qu'il rebondisse au survol.
# 4. Effets de survol de l'image
- Échangez des images : Vous pouvez créer un carrousel d'images qui s'échangent au survol.
- Images en fondu entrant/sortant : Un tel effet rend les images plus claires lorsque vous les survolez.
- Échange d'essai : Il est très courant de trouver des sites Web qui cachent diverses descriptions sur leurs images. Par exemple, un site Web de voyage peut rendre les détails de l'hôtel visibles après qu'un utilisateur a survolé.
Nous pouvons maintenant vous expliquer quelques effets de survol CSS élégants pour votre site Web.
Change Background Color on Hover
Cet effet peut être appliqué à des boutons, des liens ou du texte affiché sur une page Web. Une fois que le curseur de votre souris touche la cible, la couleur de fond change.
Vous pouvez modifier l'arrière-plan de votre texte au cours de ces étapes ;
- Utilisez
:hoverpseudo-classe pour atteindre vos objectifs - Créez un élément tel qu'un div, un bouton ou un lien où vous implémenterez l'effet de survol.
Ceci est un exemple de code pour implémenter ces effets.
Fichier HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
Hover and see me change!!!!!
</div
</body>
</html>Fichier CSS
div:hover {
background-color: rgb(255, 0, 0);
width: 18rem;
align-items: center;
text-align: center;
}Avant le vol stationnaire, la sortie sera;
Après le survol, la sortie sera ;
Change Link Color on hover
Les liens sont des éléments importants sur une page Web car ils nous aident à passer d'une page à l'autre. Nous utilisons des balises HTML pour créer des hyperliens. Changer la couleur du lien au survol augmente la visibilité des liens.
Nous avons besoin des éléments suivants pour démontrer cet effet :
- Créez une balise de sélecteur sur votre
:heador:bodyÉtiquette - Définir
:hoverpseudo-classe
Vous pouvez utiliser cet exemple de code pour afficher un lien qui passe du vert à l'orange au survol.
Fichier HTML :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
<a href="#">Hover over me and see the magic</a>
</div
</body>
</html>Fichier CSS :
a:link {
color: rgb(0, 255, 34);
}
a:hover {
color: #ff8400;
}Sortie avant le vol stationnaire ;
Sortie après effet de survol ;
Sliding Highlight on Hover
Lorsqu'un utilisateur survole, cet effet ajoutera une ombre de boîte au lien en ligne. La couleur du lien sera modifiée au cours du processus. Pour y parvenir, vous pouvez suivre ces étapes comme guide ;
- Ajoutez un rembourrage tout autour du lien (quelque chose comme 0 .25rem peut fonctionner)
- Ajoutez une marge d'une valeur similaire. Cela empêche le rembourrage de perturber le flux de texte.
Vous pouvez avoir ceci comme simple fichier html :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<a href="#">Geekflare</a>
<link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html>Cela peut être votre fichier CSS ;
a {
box-shadow: inset 0 0 0 0 rgb(255, 21, 0);
color: #ff4000;
padding: 0 .25rem;
margin: 0 -.25rem;
transition: color .3s ease-in-out, box-shadow .3s ease-in-out;
}
a:hover {
color: #fff;
box-shadow: inset 200px 0 0 0 #ff4000;;
}
a {
color: #ff4000;
font-family: 'Poppins', sans-serif;
font-size: 27px;
font-weight: 700;
line-height: 1.5;
text-decoration: none;
}
body {
display: grid;
}Avant l'effet de survol ;
Après l'effet de survol ;
Rainbow Underline on hover
Cet effet ajoute un soulignement de plusieurs couleurs au texte au survol.
- Utilisez
:linear-gradientpseudo-classe pour créer une transition en douceur entre différentes couleurs. - Utilisez
:hoverpseudo-classe pour atteindre vos objectifs. - Créez un élément de lien dans lequel vous implémenterez l'effet de survol.
Voici un exemple de code pour implémenter le soulignement arc-en-ciel au survol :
Fichier HTML :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
<p>This is <a href="#">Rainbow</a> hover effect. </p>
</div
</body>
</html>Fichier CSS :
p {
max-width: 800px;
margin: auto 15%;
line-height: 1.1;
font-size: 78px;
font-weight: 700;
letter-spacing: .0125em;
color: black;
}
a {
display: inline-block;
position: relative;
text-decoration: none;
color: inherit;
z-index: 1;
}
a::after {
content: '';
position: absolute;
left: 0;
bottom: .07em;
height: .1em;
width: 100%;
background: linear-gradient(110deg, #e1f549, #29d0be, #6cb8ea, #ff5959);
z-index: -1;
transition: height .25s cubic-bezier(.6,0,.4,1);
}
a:hover::after {
height: .2em;
}
p {
font-size: 58px;
}Avant le vol stationnaire ;
Après vol stationnaire ;
Text Swapping on hover
L'échange de test se produit lorsque le texte est échangé avec un autre élément de contenu ou de texte lorsqu'un utilisateur survole la cible. Un exemple parfait est celui où un site Web a un "commentaires" lien. Après avoir survolé, le texte du lien peut changer en "Commentaire ».
Pour implémenter l'échange de texte au survol, vous avez besoin des éléments suivants :
::beforeet::afterpseudo-elements- Ceux-ci créent un élément séparé pour le texte à échanger après le survol.:hoverPseudo-élément qui modifie la position ou la visibilité du contenu au survol
Voici une illustration de la façon de mettre en œuvre cet effet :
Fichier HTML :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<button><span>99 comments</span></button>
</body>
</html>Fichier CSS :
button { width: 10em }
button { height: 3em }
button:hover span { display: none }
button:hover:before { content: "Add a Comment" }Avant le vol stationnaire ;
Après vol stationnaire ;
Sites Web avec de grands effets de survol
Si vous souhaitez emprunter des idées et vous inspirer, voici quelques sites Web que vous pouvez consulter.
# 1. canva
canva est un nom énorme dans le monde du design car il aide les non-designers à créer de beaux designs. Ce site Web a des effets de survol impressionnants, de son accueil aux pages de produits. Tout commence par un arrière-plan sombre et flou sur la page d'accueil. Cependant, l'arrière-plan s'efface au survol et les images deviennent visibles. Des effets de survol apparaissent également lorsque vous choisissez différents modèles de conception.
# 2. Maison
Maison est un exemple parfait de site qui implémente le soulignement au survol, l'échange de texte au survol et la modification de la couleur d'arrière-plan au survol.
# 3. Travaux principaux
Travaux principaux implémente à la fois des animations et des transitions pour ses effets de survol. Certains effets notables sont l'échange de texte au survol, la modification de la couleur du texte et le zoom sur le texte et les images au survol.
Conclusion
Le choix des effets de survol à ajouter à votre site Web dépendra du type de site Web, de vos compétences, de vos goûts et de vos préférences. Certains sites, tels que les plateformes d'art et de coupons, peuvent accueillir des effets de survol super flashy. D'autre part, les sites Web juridiques et médicaux peuvent opter pour des effets de survol minimaux.
Ainsi, vous devez déterminer ce qui fonctionne pour votre site Web. Cependant, assurez-vous que ces effets correspondent aux couleurs de votre marque. Découvrez notre meilleures ressources CSS pour peaufiner vos compétences en CSS.
