Les Bordures Dégradées en CSS : Un Guide Complet
En CSS, la propriété border permet de définir l’apparence des bordures d’un élément, en termes de style, d’épaisseur et de couleur. Un dégradé, quant à lui, offre la possibilité de réaliser une transition visuelle fluide entre plusieurs couleurs, créant des effets tels que des ombres, des mélanges de couleurs ou des textures.
La propriété border-gradient va plus loin en permettant d’appliquer un dégradé directement à la bordure d’un élément. Cette technique génère un effet visuel où la couleur de la bordure change progressivement, créant ainsi un aspect dynamique et sophistiqué.
Pourquoi Opter pour une Bordure Dégradée ?
Les bordures dégradées, introduites avec CSS3, offrent de nombreux avantages. Voici quelques raisons pour lesquelles vous devriez les envisager pour vos projets web:
- Flexibilité : Contrairement aux bordures unies, les bordures dégradées permettent de créer des effets complexes et nuancés, idéals pour les mises en page ou les formes élaborées qui nécessitent un design visuel précis.
- Attrait visuel : Les dégradés de bordure attirent l’attention grâce à des contrastes de couleurs audacieux, mettant ainsi en valeur des éléments spécifiques de votre page web.
- Intégration fluide : Ces bordures permettent une fusion harmonieuse avec l’arrière-plan de l’élément, offrant un design soigné et cohérent.
Comment Intégrer un Dégradé de Bordure en CSS ?
Avant d’explorer les dégradés de bordure, rappelons comment ajouter une bordure simple à un élément HTML. Voici un exemple de code:
HTML
<div class="box contains-border">
Comment illustrer l'ajout d'une bordure !
</div>
CSS
.box {
width: 400px;
height: 50px;
max-width: 80%;
font-size: 1.5rem;
}
.contains-border {
border-color: rebeccapurple;
border-style: solid;
border-width: 5px;
}
Ce code génère une simple bordure violette de 5 pixels. Pour rendre cette bordure plus attractive, nous pouvons utiliser les dégradés.
Voici les principales approches pour ajouter un dégradé à une bordure :
Utilisation des Dégradés (Linéaire, Radial, Conique)
Nous allons explorer l’application des dégradés à une bordure de trois manières distinctes:
Dégradé Linéaire
Un dégradé linéaire effectue une transition de couleur en ligne droite. Voici un exemple de code:
HTML
<div class="box linear-gradient">
Illustration d'un dégradé linéaire
</div>
CSS
.box {
width: 350px;
height: 50px;
max-width: 80%;
font-size: 1.5rem;
}
.linear-gradient {
border-style: solid;
border-width: 10px;
border-image: linear-gradient(45deg, rgb(143, 55, 0), rgb(66, 228, 250)) 1;
}
Ici, la bordure est définie comme solide avec une épaisseur de 10 pixels. Le dégradé linéaire part de rgb(143, 55, 0), se termine en rgb(66, 228, 250), et est appliqué avec un angle de 45 degrés.
Dégradé Radial
Un dégradé radial crée un dégradé circulaire à partir d’un point central. Voici un exemple de code:
HTML
<div class="box radial-gradient">
Illustration d'un dégradé radial
</div>
CSS
.box {
width: 350px;
height: 50px;
max-width: 80%;
font-size: 1.5rem;
}
.radial-gradient {
border-style: solid;
border-width: 5px;
border-image: radial-gradient(rgb(0,143,104), rgb(250,224,66)) 1;
}
Dans cet exemple, le dégradé radial commence par un vert foncé rgb(0,143,104) et se termine en jaune rgb(250,224,66). La valeur 1 indique que l’image de bordure n’est pas répétée.
Dégradé Conique
Un dégradé conique crée une transition de couleur circulaire à partir d’un point central. Voici un exemple de code:
HTML
<div class="box conic-gradient">
Illustration d'un dégradé conique
</div>
CSS
.box {
width: 350px;
height: 50px;
max-width: 80%;
font-size: 1.5rem;
}
.conic-gradient {
border-style: solid;
border-width: 7.5px;
border-image: conic-gradient(red, rgb(0, 255, 47), rgb(255, 60, 0), rgb(13, 255, 0), blue, rgb(0, 255, 4), rgb(255, 0, 38)) 1;
}
Ce dégradé conique utilise sept couleurs différentes, et la valeur 1 indique la largeur de la bordure.
Utilisation des Images de Bordure
Au lieu de couleurs, il est possible d’utiliser des images pour les bordures, permettant des designs plus complexes. Voici un exemple:
HTML
<div class="box border-images">
Illustration d'images de bordure
</div>
CSS
.box {
width: 350px;
height: 50px;
max-width: 80%;
font-size: 1.5rem;
}
.border-images {
border-style: solid;
border-width: 15px;
border-image-source: url(/images/elephant-2910293_1920.jpg);
border-image-slice: 60 30;
}
Ici, border-image-source définit l’image utilisée pour la bordure, et border-image-slice spécifie la manière dont elle est découpée.
Utilisation de la Propriété Abrégée
Il est également possible d’utiliser une propriété abrégée pour simplifier le code. Voici un exemple:
HTML
<div class="box shorthand">
Illustration de la propriété abrégée
</div>
CSS
.box {
width: 350px;
height: 50px;
max-width: 80%;
font-size: 1.5rem;
}
.shorthand {
border-style: solid;
border-width: 15px;
border-image: url(/images/elephant-2910293_1920.jpg) 60 30;
}
La propriété border-image combine la source de l’image et les découpes.
Générateurs de Dégradés de Bordure CSS
Des outils en ligne permettent de générer facilement des dégradés de bordure sans écrire tout le code à la main. Voici quelques générateurs utiles:
#1. Générateur de Dégradé CSS – Conversion des Couleurs
Cet outil permet de générer des dégradés linéaires ou radiaux avec jusqu’à cinq couleurs. Il est possible de choisir l’angle, la position, et la couleur d’arrêt.
- Sélectionnez jusqu’à cinq couleurs pour votre dégradé.
- Choisissez le type de dégradé (linéaire ou radial).
- Ajustez la transition de couleurs avec les arrêts de couleurs.
#2. CSS Border Gradient Generator – CSS Inutilisé
Cet outil permet de créer des bordures dégradées sans ajouter de pseudo-éléments. Il propose un aperçu en temps réel et des options de personnalisation.
- Choisissez entre dégradé radial et linéaire.
- Visualisez en direct votre dégradé.
- Personnalisez les arrêts de couleur.
- Ajustez la taille et le rayon de la bordure.
#3. Générateur de Bordure Dégradée – Amit Sheen
Cet outil offre une interface avec huit zones pour créer des bordures dégradées arrondies. Il permet d’animer les dégradés et d’ajouter du JavaScript si besoin.
- Créez des animations de dégradé.
- Incorporez du code JavaScript.
- Visualisez en direct les modifications.
Conclusion
En conclusion, plusieurs approches existent pour ajouter des bordures dégradées à vos éléments web. Le choix dépendra de vos préférences, de vos compétences et de la nature de l’élément à styliser. N’hésitez pas à combiner différentes méthodes sur une même page web.
Pour enrichir davantage vos connaissances, découvrez également comment créer des doubles bordures en CSS.