Créer des bordures multicolores à l'aide de CSS

La propriété CSS border propose certaines options de personnalisation, telles que des choix tels que solide, pointillé, pointillé, etc. Cependant, en ce qui concerne la couleur de la bordure, nous ne pouvons avoir qu'une couleur unie par côté. Mais, il existe un autre moyen d'obtenir une ligne multicolore en utilisant quelques propriétés supplémentaires auxquelles vous n'auriez peut-être pas pensé, jetons un coup d'œil.

Solide

Pointillé

Pointé

Bordures multicolores

Pour obtenir une bordure multicolore comme illustré ci-dessus, nous utiliserons la propriété position et le sélecteur ::after avec un dégradé de couleurs. Tout d'abord, nous allons créer une zone d'en-tête à l'aide d'une classe HTML <div>, puis nous la styliserons avec CSS pour avoir une bordure multicolore la séparant et le contenu en dessous.

Créez votre HTML :

 <div class="ost-multi-header"> <h1> Header Title </h1> </div>

 <div class="ost-multi-header"> <h1> Header Title </h1> </div>

Maintenant, stylisons-le un peu avec CSS.

 h1{ font-size: 50px; line-height: 100px; padding-left: 20px; font-family: Arial, Helvetica, sans-serif; } .ost-multi-header { position: relative; height: 100px; background: #999999; }

 h1{ font-size: 50px; line-height: 100px; padding-left: 20px; font-family: Arial, Helvetica, sans-serif; } .ost-multi-header { position: relative; height: 100px; background: #999999; }

Vous devriez maintenant avoir quelque chose qui ressemble à ceci :

Avec cela, nous pouvons maintenant ajouter ::after au .ost-multi-header selector . Mais, avant de le faire, j'aimerais expliquer un peu ce que fait ::after et pourquoi nous avons besoin de la propriété position pour la bordure multicolore. ::after crée un pseudo-élément avec tout ce qui se trouve dans la propriété content à la fin de l'élément sélectionné. Dans notre cas, cet élément est .ost-multi-header . Faisons un "Hello World!" séculaire ! exemple pour illustrer.

Ajoutez ceci à votre CSS :

 .ost-multi-header::after{ content: 'Hello World!'; position: absolute; left: 20px; bottom: 0; }

 .ost-multi-header::after{ content: 'Hello World!'; position: absolute; left: 20px; bottom: 0; } 

Comme vous pouvez le voir, nous avons maintenant un "Hello World!" élément sous le titre de l'en-tête. Parce que notre élément parent, .ost-multi-header , a la propriété position comme relative , nous pouvons donner à un élément enfant une position absolute . Cela nous permettra de déplacer facilement notre nouveau pseudo-élément que nous avons créé avec ::after où nous le souhaitons dans l'élément parent. Nous le plaçons en bas et le déplaçons de plus de 20 pixels à partir de la gauche dans l'élément parent. Notez que si l'élément parent n'avait pas la propriété position définie sur relative, alors notre élément positionné absolu serait en bas et 20px à gauche de la fenêtre d'affichage du navigateur.

Et notre bordure colorée ? Nous allons styliser l'arrière-plan de notre pseudo-élément pour qu'il soit notre bordure multicolore à l'aide d'un dégradé. Les dégradés CSS peuvent être linéaires ou radiaux. Pour notre bordure, nous utiliserons linear-gradient . Tout simplement, cela nous donnerait la frontière que nous recherchons.

 .ost-multi-header::after{ content: ''; height: 6px; position: absolute; left: 0; right:0; bottom: 0; background: linear-gradient(to right, #ed8034 0%,#ed8034 33%,#feb123 33%,#feb123 66%,#2184cd 66%,#2184cd 100%); }

 .ost-multi-header::after{ content: ''; height: 6px; position: absolute; left: 0; right:0; bottom: 0; background: linear-gradient(to right, #ed8034 0%,#ed8034 33%,#feb123 33%,#feb123 66%,#2184cd 66%,#2184cd 100%); }

Mais, ralentissons un instant pour une étape par étape. Tout d'abord, la propriété de content est toujours là même si elle est vide. En effet, sans la propriété content , le pseudo-élément n'est jamais créé ; donc, nous en avons besoin. Nous devons définir la hauteur de notre pseudo-élément, notre hauteur de bordure. Pourquoi définir les propriétés left et right sur 0 ? Sans une largeur définie, cela étirera le pseudo-élément à 100% de largeur à l'intérieur de l'élément parent. Cela peut sembler beaucoup, mais les paramètres linear-gradient simplement à la couleur de couler de gauche "à droite", et nous mettons les couleurs que nous voulons à certains pourcentages de l'arrière-plan.

Même si tout ce que nous faisons est de choisir les couleurs à des pourcentages spécifiques, c'est beaucoup de travail sur les jambes. Heureusement, il existe des ressources en ligne gratuites qui aident énormément avec les dégradés de couleurs. Ultimate CSS Gradient Generator de ColorZilla est un excellent outil qui inclut plusieurs propriétés de dégradé pour prendre en charge les anciens navigateurs.

Nous avons un dégradé déjà configuré sur l'outil, nous pouvons donc utiliser ce lien pour voir les paramètres exacts utilisés dans ce tutoriel : https://colorzilla.com/gradient-editor/#ed8034+0,ed8034+33,feb123+33 ,fév123+66,2184cd+66,2184cd+100. Ça devrait ressembler à ça:

Il y a beaucoup de paramètres sur ce site, mais concentrons-nous sur les paramètres dont nous avions besoin pour créer le look que nous allons utiliser pour notre bordure. Décomposons-le :

1. Préréglages - Ceux-ci peuvent être un excellent point de départ !
2. Barre de défilement - Vous pouvez ajouter, supprimer et modifier des couleurs ici
3. Arrêts - Cette section vous permet de modifier les paramètres d'opacité et d'emplacement de chaque couleur. Cliquez simplement sur la case de couleur sur le curseur ci-dessus pour changer celle que vous contrôlez dans cette section.
4. Aperçu - Ici, vous pouvez voir immédiatement les résultats de vos modifications.
5. Orientation et taille - Cela vous permet de changer entre horizontal, vertical, diagonal ou radial. Et pour définir la taille du dégradé.
6. Code CSS - Le code généré avec un lien permanent pour que vous puissiez toujours revenir en arrière et modifier facilement votre dégradé.

Nous ne recherchions pas un dégradé délavé dans notre cas, mais plutôt une transition plate solide entre deux couleurs, donc tout ce que nous avons à faire est d'empiler les deux couleurs l'une sur l'autre là où nous voulons que cela se produise. Dans notre exemple, nous avons empilé les couleurs à 33 % et 66 % respectivement.

N'hésitez pas à jouer avec les paramètres, sachant que ce que vous voyez dans l'aperçu est ce que le code va générer. Lorsque vous obtenez la configuration de l'apparence comme vous le souhaitez, vous pouvez utiliser le bouton "copier" dans le coin inférieur droit de la zone de code.

Si vous avez copié le code tel que je l'avais dans le lien, votre CSS final ressemblera à ceci :

 h1{ font-size: 50px; line-height: 100px; padding-left: 20px; font-family: Arial, Helvetica, sans-serif; } .ost-multi-header { position: relative; height: 100px; background: #999999; padding-bottom: 6px; } .ost-multi-header::after{ content: ''; height: 6px; position: absolute; left: 0; right: 0; bottom: 0; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ed8034+0,ed8034+33,feb123+33,feb123+66,2184cd+66,2184cd+100 */ background: rgb(237,128,52); /* Old browsers */ background: rgb(237,128,52); /* Old browsers */ background: -moz-linear-gradient(left, rgba(237,128,52,1) 0%, rgba(237,128,52,1) 33%, rgba(254,177,35,1) 33%, rgba(254,177,35,1) 66%, rgba(33,132,205,1) 66%, rgba(33,132,205,1) 100%); /* FF3.6-15 */ background: -moz-linear-gradient(left, rgba(237,128,52,1) 0%, rgba(237,128,52,1) 33%, rgba(254,177,35,1) 33%, rgba(254,177,35,1) 66%, rgba(33,132,205,1) 66%, rgba(33,132,205,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, rgba(237,128,52,1) 0%,rgba(237,128,52,1) 33%,rgba(254,177,35,1) 33%,rgba(254,177,35,1) 66%,rgba(33,132,205,1) 66%,rgba(33,132,205,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: -webkit-linear-gradient(left, rgba(237,128,52,1) 0%,rgba(237,128,52,1) 33%,rgba(254,177,35,1) 33%,rgba(254,177,35,1) 66%,rgba(33,132,205,1) 66%,rgba(33,132,205,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, rgba(237,128,52,1) 0%,rgba(237,128,52,1) 33%,rgba(254,177,35,1) 33%,rgba(254,177,35,1) 66%,rgba(33,132,205,1) 66%,rgba(33,132,205,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ background: linear-gradient(to right, rgba(237,128,52,1) 0%,rgba(237,128,52,1) 33%,rgba(254,177,35,1) 33%,rgba(254,177,35,1) 66%,rgba(33,132,205,1) 66%,rgba(33,132,205,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ed8034', endColorstr='#2184cd',GradientType=1 ); /* IE6-9 */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ed8034', endColorstr='#2184cd',GradientType=1 ); /* IE6-9 */ }

 h1{ font-size: 50px; line-height: 100px; padding-left: 20px; font-family: Arial, Helvetica, sans-serif; } .ost-multi-header { position: relative; height: 100px; background: #999999; padding-bottom: 6px; } .ost-multi-header::after{ content: ''; height: 6px; position: absolute; left: 0; right: 0; bottom: 0; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ed8034+0,ed8034+33,feb123+33,feb123+66,2184cd+66,2184cd+100 */ background: rgb(237,128,52); /* Old browsers */ background: rgb(237,128,52); /* Old browsers */ background: -moz-linear-gradient(left, rgba(237,128,52,1) 0%, rgba(237,128,52,1) 33%, rgba(254,177,35,1) 33%, rgba(254,177,35,1) 66%, rgba(33,132,205,1) 66%, rgba(33,132,205,1) 100%); /* FF3.6-15 */ background: -moz-linear-gradient(left, rgba(237,128,52,1) 0%, rgba(237,128,52,1) 33%, rgba(254,177,35,1) 33%, rgba(254,177,35,1) 66%, rgba(33,132,205,1) 66%, rgba(33,132,205,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, rgba(237,128,52,1) 0%,rgba(237,128,52,1) 33%,rgba(254,177,35,1) 33%,rgba(254,177,35,1) 66%,rgba(33,132,205,1) 66%,rgba(33,132,205,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: -webkit-linear-gradient(left, rgba(237,128,52,1) 0%,rgba(237,128,52,1) 33%,rgba(254,177,35,1) 33%,rgba(254,177,35,1) 66%,rgba(33,132,205,1) 66%,rgba(33,132,205,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, rgba(237,128,52,1) 0%,rgba(237,128,52,1) 33%,rgba(254,177,35,1) 33%,rgba(254,177,35,1) 66%,rgba(33,132,205,1) 66%,rgba(33,132,205,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ background: linear-gradient(to right, rgba(237,128,52,1) 0%,rgba(237,128,52,1) 33%,rgba(254,177,35,1) 33%,rgba(254,177,35,1) 66%,rgba(33,132,205,1) 66%,rgba(33,132,205,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ed8034', endColorstr='#2184cd',GradientType=1 ); /* IE6-9 */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ed8034', endColorstr='#2184cd',GradientType=1 ); /* IE6-9 */ }

Et, ce CSS produira ce soulignement multicolore entièrement réactif :

On y va ! Nous n'avons pas eu à ajouter le rembourrage de 6 pixels au bas de .ost-multi-header , mais l'enfant en position absolute n'affecte plus la hauteur de l'élément parent. Nous pouvons le laisser flotter au-dessus de notre contenu dans l'élément parent, ou ajouter padding pour nous assurer qu'il ne couvre aucun contenu que nous ne voudrions pas obstruer.

Voici un lien vers cet exercice recréé sur CodePen pour que chacun puisse éditer et apprendre sans souci.

Une dernière note, certains navigateurs plus anciens ne prennent en charge que le sélecteur deux-points simple :after , et non le double standard moderne ::after . Vous pouvez utiliser le côlon simple si vous souhaitez être en sécurité. Cela fonctionnera également dans les navigateurs modernes pour le moment.