La propriété border en CSS permet aux concepteurs Web de spécifier le style, la largeur et la couleur des bordures d'un élément.
En CSS, un dégradé permet à un concepteur d'appliquer une transition en douceur entre deux ou plusieurs couleurs. Vous pouvez utiliser des dégradés pour créer des effets visuels tels que l'ombrage, le mélange des couleurs et la texture sur les éléments de votre page Web.
Le dégradé de bordure est une propriété CSS qui permet aux développeurs d'appliquer un dégradé à la bordure d'un élément.
Une bordure dégradée crée un effet visuel où la couleur de la bordure change d'une couleur à l'autre.
Pourquoi utiliser une bordure dégradée ?
Les dégradés de bordure faisaient partie des diverses fonctionnalités de style introduites dans CSS3. Voici quelques-unes des raisons pour lesquelles vous devriez l'avoir sur votre prochaine application Web :
- Un dégradé de bordure est flexible : Vous pouvez créer des effets complexes et superposés à l'aide de bordures dégradées. Ceci est différent des bordures de couleur unie, qui sont rigides. Les bordures dégradées sont donc utiles lorsqu'il s'agit de mises en page ou de formes complexes qui exigent des conceptions visuelles nuancées.
- Créer un attrait visuel : En utilisant l'effet de bordure dégradée, vous pouvez ajouter des effets visuels accrocheurs à vos conceptions. Par exemple, vous pouvez utiliser des contrastes de couleurs audacieux pour attirer l'attention sur un élément spécifique de votre page Web.
- Fournir une intégration transparente : Les bordures dégradées vous permettent d'intégrer de manière transparente la bordure dans l'arrière-plan de votre élément. Une telle approche donne à votre page Web un aspect solide et cohérent, montrant une conception bien pensée.
How to add Border Gradient in CSS
Avant de montrer comment ajouter un border gradient, nous pouvons illustrer comment ajouter une bordure à un élément HTML.
Nous pouvons utiliser ce code;
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Document</title>
</head>
<body>
<div class="box contains-border">
How to add a Border illustrated!!!
</div>
</body>
</html>CSS
.box {
width: 400px;
height: 50px;
max-width: 80%;
font-size: 1.5rem;
}
.contains-border {
border-color: rebeccapurple;
border-style: solid;
border-width: 5px;
}La page rendue apparaîtra comme :
Même si le code ci-dessus a une bordure, il n'est pas aussi attrayant pour les yeux car il est vide. Nous n'avons qu'une bordure violette Rebecca solide de 5 pixels autour de notre div.
Nous pouvons rendre notre bordure attrayante en utilisant des dégradés de bordure. Il existe différentes approches pour ajouter un dégradé de bordure. Voici quelques-uns des principaux :
Using Gradient Borders (Linear Gradient, Radial Gradient, Conic Gradient)
Nous allons illustrer comment utiliser Gradient Borders de trois manières différentes :
Gradient linéaire
A linear gradient crée une transition douce entre deux ou plusieurs couleurs en ligne droite. Nous pouvons utiliser le code suivant pour démontrer :
HTML
<!DOCTYPE html>
<html>
<head>
<title>Linear Gradient Example</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="box linear-gradient">
Linear Gradient Illustration
</div>
</body>
</html>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;
}Nous avons spécifié le style de bordure comme solide, ce qui signifie que la bordure autour de notre boîte est une ligne continue. La largeur de la bordure de notre code est de 10 pixels.
Le dégradé linéaire commence par rgb(143, 55, 0)" et se termine par "rgb(66, 228, 250)". Nous avons également spécifié un angle de 45 degrés. La largeur de la tranche d'image de bordure est définie sur "1".
La page rendue apparaîtra comme :
Dégradé radial
A radial gradient crée un dégradé circulaire partant d'un point central, permettant aux utilisateurs de passer d'une couleur à une autre dans l'élément d'une page Web.
Nous pouvons illustrer comment ajouter un dégradé radial en utilisant ce code :
HTML
<!DOCTYPE html>
<html>
<head>
<title>Radial Gradient Example</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="box radial-gradient">
Radial Gradient Illustration
</div>
</body>
</html>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;
}Nous avons défini le style de bordure de notre élément comme solide. Nous avons également donné à notre bordure une largeur de bordure de 5px.
Le dégradé radial commence par un RVB vert foncé (0,143,104) et se termine par un jaune vif, désigné par RVB (250,224,66).
Le '1' à la fin du code représente la propriété border-image-repeat. Cette valeur indique au navigateur de ne répéter l'image de bordure qu'une seule fois autour de la bordure de l'élément.
La page rendue apparaîtra comme :
Dégradé conique
A conic gradient crée une transition de couleur circulaire. Dans cet effet, la transition part d'un point central puis s'étend vers l'extérieur, formant un effet circulaire.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Conic Gradient Example</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="box conic-gradient">
Conic Gradient Illustration
</div>
</body>
</html>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;
}Dans ce code, nous définissons le border style comme solide et donne à la bordure une largeur de 7.5 pixels. Le border-image La propriété définit le dégradé de la bordure. Il existe sept couleurs, commençant par le rouge et se terminant par rgb (255, 0, 38).
Le chiffre '1' à la fin du code donne une largeur de bordure de 1 pixel.
La page rendue apparaîtra comme :
Using Border Images
Border images remplacer les bordures unies standard des éléments HTML. Les images de bordure sont utilisées pour créer des conceptions complexes au lieu de combiner des couleurs pour créer un dégradé de bordure.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Border Images Example</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="box border-images">
Border Images Illustration
</div>
</body>
</html>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;
}Nous avons donné notre border-width propriété une largeur de 15px et définissez la border-style aussi solide.
Le border-image-slice définit la largeur et la hauteur de la zone de bordure à 60 % et 30 %, respectivement.
La page rendue apparaîtra comme :
Using Shorthand Property
A shorthand La propriété permet aux développeurs de styliser plusieurs propriétés CSS individuelles à l'aide d'une seule ligne de code. Dans ce cas, nous utilisons border-image pour spécifier border-image-source et border-image-slice.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Shorthand Property Example</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="box shorthand">
Shorthand Property Illustration
</div>
</body>
</html>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 page rendue apparaîtra comme :
CSS border gradient generators
Les générateurs de dégradé de bordure CSS aident les développeurs à ajouter des effets de dégradé sur les éléments d'une page Web. Ces générateurs vous permettent d'ajuster les paramètres, ce qui signifie que vous n'avez pas à tout créer à partir de zéro. Voici quelques-uns des outils que vous pouvez utiliser :
# 1. Générateur de dégradé CSS - Conversion des couleurs
Le Conversion des couleurs vous permet de générer du code CSS dégradé linéaire ou radial avec jusqu'à cinq couleurs. Le code de dégradé CSS que vous avez généré peut être utilisé comme bordure ou image d'arrière-plan d'un élément.
Vous pouvez faire ce qui suit avec ce générateur ;
- Sélectionnez jusqu'à cinq couleurs et utilisez-les dans le dégradé de bordure.
- Choisissez la direction du dégradé. L'outil a des dégradés linéaires et radiaux.
- Vous pouvez décider comment la transition des couleurs se produit à l'aide de la fonction d'arrêt des couleurs.
Une fois que vous avez fini d'expérimenter et de générer le code, vous pouvez le copier et l'utiliser sur votre site Web.
# 2. CSS Border Gradient Generator - CSS inutilisé
CSS inutilisé aide les développeurs à générer des bordures dégradées qu'ils peuvent appliquer aux éléments de bloc sans créer de pseudo-éléments ou d'éléments supplémentaires.
Vous pouvez effectuer les opérations suivantes ;
- Choisissez entre différents types de dégradés. Vous pouvez facilement basculer entre les dégradés radiaux et linéaires lorsque vous travaillez avec cet outil.
- Onglet Aperçu. L'outil vous permet de prévisualiser l'apparence du dégradé de bordure sur votre page Web lorsque vous la personnalisez.
- La couleur s'arrête. Cet outil permet de décider facilement comment les transitions se produiront pour différentes couleurs.
- Personnalisation de la taille des bordures. Vous pouvez facilement personnaliser la taille et le rayon de la bordure avec cet outil.
Une fois que vous êtes satisfait du code généré, vous pouvez le copier et l'utiliser sur votre projet.
# 3. Générateur de bordure dégradée - Amit Sheen
Cet outil dispose de huit zones d'arrière-plan différentes, permettant aux développeurs de créer des effets de bordure dégradés arrondis.
Vous pouvez réaliser ce qui suit ;
- Créez des animations dégradées. L'outil vous permet de générer des animations dégradées qui font la transition entre deux ou plusieurs couleurs.
- Vous pouvez inclure du code JavaScript. Si votre élément personnalisable nécessite du code JS, vous pouvez toujours le trouver et le personnaliser à partir du panneau de configuration.
- Aperçu en direct. Vous pouvez afficher les modifications apportées à votre code au fur et à mesure que vous le personnalisez.
Vous pouvez copier-coller le code après avoir personnalisé vos effets de dégradé de bordure à votre guise.
Conclusion
Lors de la conception de vos pages Web, vous pouvez utiliser l'une des approches ci-dessus pour ajouter une bordure dégradée à vos éléments. Le choix de l'approche peut varier en fonction des préférences, du niveau de compétence et de la nature de l'élément que vous stylisez.
Vous pouvez également utiliser différentes approches pour différents éléments sur la même page Web.
Découvrez comment créer une double bordure en CSS pour améliorer l'attrait visuel de votre page Web.
