L'auteur de l'article, dont nous publions la traduction aujourd'hui, propose, en utilisant du CSS pur, de créer un mécanisme pour changer la couleur du texte du lien lorsque vous le survolez. Mais cela ne devrait pas être un changement de couleur ordinaire. La nouvelle couleur doit remplir le lien de gauche à droite, en remplaçant l'ancienne.Pour ce faire, vous pouvez recourir à l'une des quatre méthodes décrites dans ce document. Considérez ces méthodes, en accordant une attention particulière à diverses choses importantes comme l'accessibilité du contenu, les performances de la solution et la prise en charge du navigateur.Méthode n ° 1: utiliser l'arrière-plan-clip: texte
Au moment d'écrire ces lignes, la propriété background-clip: text est expérimentale. Elle n'est pas prise en charge dans Internet Explorer 11 et les versions antérieures. Cette méthode consiste à créer le soi-disant « texte défonçable » (texte qui ressemble à celui-ci est découpé sur une certaine surface et l'arrière-plan en est translucide) avec un dégradé net . Le balisage HTML consiste en un seul élément <a>qui décrit un lien hypertexte.<a href="#">Link Hover</a>
Commençons par créer des styles pour le lien. L'utilisation overflow: hiddenentraînera le fait que lorsque vous modifiez l'apparence du lien, tout ce qui dépasse la portée de cet élément est coupé.a {
position: relative;
display: inline-block;
font-size: 2em;
font-weight: 800;
color: royalblue;
overflow: hidden;
}
Nous devrons utiliser un dégradé linéaire net avec une valeur de 50% pour les couleurs de début et de fin du lien.a {
background: linear-gradient(to right, midnightblue, midnightblue 50%, royalblue 50%);
}
Utilisez la propriété background-clippour découper le dégradé. Donnons-lui une valeur textpour l'affichage du texte. Nous utiliserons les propriétés de background-sizeet background-position. Ceci est fait pour afficher la couleur initiale.a {
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 200% 100%;
background-position: 100%;
}
Et enfin, ajoutez une propriété CSS au style et stylisez la transitionpseudo-classe de lien hypertexte :hover. Pour que la nouvelle couleur remplisse le lien de gauche à droite lorsque vous survolez le lien, utilisez la propriété background-position.a {
transition: background-position 275ms ease;
}
a:hover {
background-position: 0 100%;
}
Voici un exemple sur CodePen. Bien que cette technique vous permette d'obtenir l'effet souhaité, Safari et Chrome ont coupé les éléments de texte et d'ombre. Cela signifie qu'ils ne seront pas affichés. L'application de styles de texte, comme le soulignement de texte à l'aide de la propriété CSS text-decoration, ne fonctionnera pas. Par conséquent, si vous souhaitez que les liens soient soulignés, vous devez envisager d'autres façons de personnaliser le soulignement .Méthode n ° 2: application de largeur / hauteur
Cette méthode est basée sur l'utilisation de l'attribut data- * contenant le même texte que la balise <a>. Ici, vous utilisez la gestion des propriétés width(pour remplir le lien avec la couleur de gauche à droite ou de droite à gauche) ou la propriété height(pour appliquer l'effet de haut en bas ou de bas en haut). Par exemple, dans notre cas, un effet est appliqué à une propriété widthqui, lorsque vous passez la souris sur un lien, passe de 0 à 100%. Voici le balisage:<a href="#" data-content="Link Hover">Link Hover</a>
Le CSS est similaire à celui utilisé dans l'exemple précédent, à l'exception des paramètres de propriété d'arrière-plan. Ici, en plus, la propriété fonctionnera bien text-decoration:a {
position: relative;
display: inline-block;
font-size: 2em;
color: royalblue;
font-weight: 800;
text-decoration: underline;
overflow: hidden;
}
C'est là que nous devons utiliser le texte de l'attribut data-content. Ce texte sera placé en haut du contenu de la balise <a>. Nous pouvons utiliser ici une petite astuce intéressante, qui consiste à copier du texte à partir d'un attribut et à le dériver à l'aide d'une fonction attr()dans la propriété d'un contentpseudo-élément d'un lien ::before.a::before {
position: absolute;
content: attr(data-content);
top: 0;
left: 0;
color: midnightblue;
text-decoration: underline;
overflow: hidden;
transition: width 275ms ease;
}
Pour que le texte ne passe pas à une nouvelle ligne, un style sera appliqué au pseudo-élément white-space: nowrap. Pour changer la couleur du lien, définissez la valeur de la propriété CSS du colorpseudo - élément ::beforeet faites en sorte qu'au début la valeur de la propriété soit width0:a::before {
width: 0;
white-space: nowrap;
}
Augmentez la valeur du widthpseudo-élément ::beforeà 100% pour appliquer l'effet lorsque vous survolez le lien de la souris:a:hover::before {
width: 100%;
}
Voici un exemple d'application de cette méthode: bien que nous, agissant sur les propriétés de l'élément widthet heightobtenions ce dont nous avons besoin, cette méthode se distingue par sa faible productivité . Afin d'obtenir un changement de couleur fluide à 60 images par seconde, il est préférable d'utiliser les propriétés transformou. L' opacityutilisation de la propriété text-decorationvous permet d'utiliser différents styles de mise en valeur du texte dans les liens animés. Voici un exemple qui le démontre, créé en utilisant la troisième technique, que nous allons maintenant considérer. Il est basé sur l'utilisation de la propriété CSS de clip-path .Méthode 3: utilisation du clip-path
Ici, nous utiliserons la propriété CSS clip-pathet le polygone, dans ce cas, le rectangle. Le rectangle a quatre coins, la longueur de deux de ses côtés augmente lorsque vous survolez le lien. La figure s'agrandit, l'un de ses côtés se déplace de gauche à droite.Il utilise le même balisage que dans l'exemple précédent:<a href="#" data-content="Link Hover">Link Hover</a>
Nous utiliserons à nouveau le pseudo-élément ::before. Mais le CSS est différent ici:a::before {
position: absolute;
content: attr(data-content);
color: midnightblue;
text-decoration: underline;
clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
transition: clip-path 275ms ease;
}
Contrairement à la méthode précédente, ici, la propriété text-decoration: underlinedoit être définie pour le pseudo-élément ::before. Ceci est nécessaire pour que le changement de couleur affecte non seulement le texte du lien, mais aussi la ligne qui souligne le lien. Voyons maintenant le code CSS de la propriété clip-path:clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
Les positions des sommets du polygone dans la propriété sont clip-pathspécifiées en pourcentage, elles déterminent les coordonnées dans l'ordre correspondant à leur placement sur le polygone:0 0 = coin supérieur gauche0 0 = coin supérieur droit0 100% = coin inférieur droit0 100% = coin inférieur gauche
Le sens d'application de l'effet de remplissage peut être modifié en modifiant les coordonnées. Maintenant que nous connaissons les coordonnées, nous pouvons faire grandir la figure en se déplaçant de gauche à droite lorsque vous survolez le lien de la souris:a:hover::before {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
Voici une version de travail de cet exemple. Cette technique d'animation des couleurs des liens fonctionne très bien, mais avant de l'utiliser, envisagez la prise en charge de la propriété dans clip-pathdifférents navigateurs. Il clip-pathest préférable de créer des transitions CSS à l'aide de la technique hauteur / largeur. Cependant, son utilisation conduit au fait que le navigateur effectue des opérations Paint très gourmandes en ressources (dessin).Méthode n ° 4: utiliser la transformation
Le balisage utilisé ici utilise la technique de masquage des éléments <span>. Puisque nous utiliserons du <span>contenu qui duplique le contenu du lien dans l'élément , nous utiliserons l' attribut pour améliorer la disponibilité du contenu aria-hidden="true". Cela masquera le texte répétitif des lecteurs d'écran.Ce texte ne sera pas exprimé deux fois:<a href="#"><span data-content="Link Hover" aria-hidden="true"></span>Link Hover</a>
Le CSS de l'élément <span>contient une description de la transition, qui commence à gauche:span {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
transform: translateX(-100%);
transition: transform 275ms ease;
}
Vous devez maintenant organiser le mouvement de l'élément <span>vers la droite, comme indiqué ci-dessous.Pour ce faire, utilisez l' ::beforeélément pseudo- élément <span>. Et, comme précédemment, nous recourrons à l'utilisation de l'attribut data-content. Modifions la position de l'élément, en appliquant une transformation transform: translateX(100%), en le déplaçant le long de l'axe X.span::before {
display: inline-block;
content: attr(data-content);
color: midnightblue;
transform: translateX(100%);
transition: transform 275ms ease;
text-decoration: underline;
}
Comme pour l'élément <span>, la position du pseudo-élément ::beforesera définie à l'aide de la construction transform: translateX(0):a:hover span::before {
transform: translateX(0);
}
Voici un exemple sur CodePen. Bien que cette méthode ait la meilleure prise en charge multi-navigateur de ce qui précède, elle a besoin de plus de HTML et CSS pour l'implémenter. Néanmoins, l'utilisation des propriétés CSS transform ne nuit pas aux performances , son utilisation ne provoque pas de redessin des éléments et, par conséquent, conduit à la formation de transitions CSS fluides à 60 images par seconde.Sommaire
Nous venons d'examiner quatre méthodes différentes pour obtenir le même effet en utilisant CSS. Bien que chacun d'eux ait ses avantages et ses inconvénients, vous pouvez voir qu'il n'y a rien d'impossible à organiser l'animation de la couleur du texte des liens lorsque vous les survolez. Il s'agit d'un petit effet agréable, dont l'utilisation conduit au fait que les liens sont perçus comme plus interactifs.Chers lecteurs! Animez-vous des liens dans vos projets?