Comment réaliser un gradient border en CSS pure

Développement

25 mai 2021

Dans ce court tuto, nous allons voir comment ajouter une bordure aux couleurs dégradées (gradient border) à une div afin de personnaliser votre design CSS.

1. Préambule

Avant de commencer, notons deux choses :
-Il n’existe pas de méthode officielle ni d’API CSS pour réaliser ce type de bordure colorée.
-D’autres “hacks” permettent d’obtenir un résultat proche de celui que nous allons voir aujourd’hui, néanmoins nous avons choisi de retenir la méthode ci-dessous dans la mesure ou elle permet de conserver le “border-radius” de votre élément principal.

2. Explications

La méthode utilisée dans ce tuto consiste à associer un pseudo-élément “:before” dont le “background” se trouve être un dégradé à l’arrière de notre élément html principal. Une fois notre pseudo-élément positionné, il suffit alors de nous assurer que ses dimensions sont supérieures à celles de l’élément principal pour obtenir un effet de bordure dégradée.

3. Exemple

See the Pen CSS Gradient Border by Mehdi (@Mehdi-Adnati) on CodePen.

À vos claviers

0 commentaires

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Share This