Alexis Bohn

maîtrise d'œuvre web - graphisme - rédaction

Alexis Bohn

L’astuce Wikimedia pour animer une border avec background

Uncategorized

Après mon don annuel à Wikimedia Foundation, je me suis rendu sur diverses pages évoquant le soutien des entreprises à leurs salariés donateurs. Et là, j’y ai trouvé une astuce pour animer une border en highlight avec l’attribut CSS background.

Cette belle fonction est toute rudimentaire et entièrement en CSS. Elle fait passer une ancre du soulignement au surlignement. Exemple ici.

Capture d'écran de la page Wikimedia où ils ont su animer une border avec l'attribut background.
Capture de la page Wikimedia avec sous le premier titre une ancre survolée (:hover) et tout en bas deux ancres standards (défaut). On voit dans le premier que Wikimedia a su animer une border.

Préférer le background à la border pour animer une border

Pour commencer, on n’utilise en fait pas l’attribut border, mais uniquement background. En fait, on va jouer sur sa size et sa position. Même si dans le résultat on a l’impression d’animer une border, on ne va pourtant pas toucher à cet attribut.

Ensuite, pour la size, on part sur du 100% (largeur) et 0,2rem (hauteur). C’est un peu comme une border pour le moment, à cela près qu’une border ne pourra pas déborder ou « manger » le texte comme le fait cette utilisation du background. Cette pseudo-bordure commence donc à partir du pixel/point/em le plus bas de l’élément (texte) et va vers le haut. Du coup, là où une bordure classique commencerait sous le pixel/point/em le plus bas de l’élément. Dans les deux cas, on peut jouer sur le padding pour aérer le design.

a {
background-size: 100% 0,2rem;
}
Animer une border avec l'attribut background.
On voit dans le panneau les divers réglages des attributs de l’ancre défaut et survolée

Premièrement, on remarque qu’ils passent le background en 1.5rem pour la hauteur, mais ils auraient pu le mettre en 100%, ça marche aussi bien et c’est plus réceptif aux modifications de taille de police par exemple.

a:hover {
background-size: 100% 100% ;
}

Transition

Ensuite, on note que la transition permet d’animer l’effet qui n’aurait pas trop d’intérêt sinon. On est sur du standard :

transition-property: all;
transition-duration: 300ms;
transition-timing-function: ease;
transition-delay: 0s;

Le mini-soulignement de gauche

Dans ce cas, j’avais déjà modifié la background-position en left et bottom (gauche en X – bas en Y). Les codeurs de Wikimedia l’avaient simplement réglé en bottom et par défaut le X semble être en center.

Maintenant, l’intérêt du background-position m’a conduit à résoudre un problème de longue date qui est de placer un tiret en bas à gauche d’un titre par exemple. Eh bien avec les réglages suivants, en défaut, ça marche !

background-size: 10% 0.2rem;
background-position: left bottom;
Animer une border avec l'attribut background.
L’effet tiret en début de titre.

Mes créations