In Développement | Dernière mise à jourated: le 8 novembre 2023

Logiciel Jira est l'outil de gestion de projet n°1 utilisé par les équipes agiles pour planifier, suivre, publier et prendre en charge d'excellents logiciels.

Comment ajouter un dégradé de bordure en CSS [+3 outils]

By Titus Kamunya

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 douce entre deux ou plusieurs couleurs. Vous pouvez utiliser des dégradés pour créerate effets visuels tels que l'ombrage, la couleur blending et 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 création de bordure dégradéeateun 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éerate effets complexes et superposés utilisant des 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 nécessitent nuanced conceptions visuelles.
Create 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 transparenteate 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 un design bien pensé.

Comment ajouter un dégradé de bordure en CSS

Avant de démontrerate comment ajouter un border gradient, on peut illustrerate 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 :

Utilisation de bordures dégradées (dégradé linéaire, dégradé radial, dégradé conique)

Nous illustreronsate comment utiliser les bordures dégradées de trois manières différentes :

Gradient linéaire

A linear gradient CREateune transition douce entre deux ou plusieurs couleurs en ligne droite. Nous pouvons utiliser le code suivant pour démontrerate:

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 étant solide, c'est-à-dire la bordure autour de notre box est une ligne continue. La largeur de la bordure sur notre code est de 10 px.

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 CREateun dégradé circulaire rayonnant à partir d'un point central, permettant aux utilisateurs de passer d'une couleur à une autre dans l'élément d'une page Web.

Nous pouvons illustrerate 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 browser pour répéter l'image de bordure une seule fois autour de la bordure de l'élément.

La page rendue apparaîtra comme :

Dégradé conique

A conic gradient CREateune 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 :

Utilisation des images de bordure

Border images remplacer les bordures pleines standard des éléments HTML. Les images de bordure sont utilisées pour créerate des designs complexes au lieu de combiner les couleurs pour créerate 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.

La border-image-slice définit la largeur et la hauteur de la bordure box à 60 % et 30 %, respectivement.

La page rendue apparaîtra comme :

Utilisation de la propriété abrégée

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 :

Générateurs de dégradés de bordure CSS

Les générateurs de dégradés 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 besoin de créerate tout à partir de zéro. Voici quelques-uns des outils que vous pouvez utiliser :

# 1. Générateur de dégradé CSS - Conversion des couleurs

La Conversion des couleurs vous permet de générerate Code CSS à dégradé linéaire ou radial avec jusqu'à cinq couleurs. Le code de dégradé CSS que vous générezated peut être utilisé comme bordure d'un élément ou comme image d'arrière-plan.

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érerate bordures dégradées qu'ils peuvent appliquer aux éléments de bloc sans créer de pseudo-éléments ou extra éléments.

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.
Prevonglet Afficher. L'outil vous permet de prevVoyez comment le dégradé de bordure apparaîtra sur votre page Web à mesure que vous la personnaliserez.
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 générateur de codeated, 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éerate effets de bordure dégradé arrondis.

Vous pouvez réaliser ce qui suit ;

Create pente animation. L'outil vous permet de générerate pente animasituations 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.
En direct prevvue. Vous pouvez afficher les modifications apportées à votre code à 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 CREate une double bordure en CSS pour améliorer l'attrait visuel de votre page Web.

Publié dans

Comment ajouter un dégradé de bordure en CSS [+3 outils]

Pourquoi utiliser une bordure dégradée ?

Comment ajouter un dégradé de bordure en CSS

Utilisation de bordures dégradées (dégradé linéaire, dégradé radial, dégradé conique)

Gradient linéaire

Dégradé radial

Dégradé conique

Utilisation des images de bordure

Utilisation de la propriété abrégée

Générateurs de dégradés de bordure CSS

# 1. Générateur de dégradé CSS - Conversion des couleurs

# 2. CSS Border Gradient Generator - CSS inutilisé

# 3. Générateur de bordure dégradée - Amit Sheen

Conclusion

Merci à nos commanditaires

Alimentez votre entreprise

Certains des outils et services pour aider votre entreprise grow.