none

Comment réaliser un gradient border en CSS pure (dégradé en bordure CSS)

Développement

25 mai 2021

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

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 dégradé en bordure.
-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é CSS à 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 *

brand-builders

Restons connectés

Inscrivez-vous à notre newsletter pour ne manquer aucun tuto !

Votre inscription a bien été prise en compte !

Share This