Comment créer des couleurs de bordure dégradées CSS

Cet article fait partie de notre "série de tutoriels HTML5 / CSS3" - destiné à vous aider à devenir un meilleur concepteur et / ou développeur. Cliquez ici pour voir plus d'articles de la même série.

Avec toutes les nouvelles fonctionnalités de CSS3, nous sommes désormais en mesure de créer des sites Web sans image. Dans le passé, l'utilisation de l'image était inévitable quand il s'agissait de montrer des couleurs dégradées. Aujourd'hui, il devient beaucoup plus léger avec l'utilisation de CSS3 Gradient Background . Dans les articles précédents, nous vous avons montré comment appliquer le dégradé CSS3 en tant que couleur de fond dans différentes formes et directions; Gradients linéaires, elliptiques et répétitifs.

Mais CSS3 Gradient ne s'arrête pas seulement pour l'utilisation en arrière-plan. Saviez-vous que vous pouvez également l'utiliser à l'intérieur des frontières ? Lisez la suite pour apprendre comment faire cela.

Première méthode

La première méthode consiste à appliquer le dégradé CSS3 dans les pseudo-éléments . Eh bien, voyons comment ça se passe.

Bordure dégradée de haut en bas

Nous allons commencer avec un simple dégradé qui s'étend de haut en bas. Pour commencer, créez une boîte avec un div, comme suit.

HTML

CSS

 .box {largeur: 400px; hauteur: 400px; fond: #eee; } 

Pour former le dégradé dans les limites de la boîte, définissez d'abord une bordure solide sur les côtés supérieur et inférieur de la boîte. Nous créons également 2 rectangles avec 2 pseudo-éléments s - :before et :after - et spécifions la largeur dans la même taille que la largeur de la bordure de la boîte. Positionnez les rectangles sur les côtés gauche et droit de la boîte et utilisez linear-gradient travers l' background-image . Vous pouvez voir comment cette astuce se révèle ci-dessous:

Dégradé de gauche à droite

Maintenant, créons un dégradé qui s'étend à gauche et à droite d'une manière identique à l'exemple précédent. Seulement, cette fois, nous allons ajouter la bordure de la boîte sur les côtés gauche et droit, plutôt que sur le haut et le bas. De même, nous utilisons également pseudo-élément - :before et :after - pour former 2 rectangles. Mais, contrairement à l'exemple précédent, nous les plaçons maintenant en haut et en bas de la boîte.

Diagonal Border Gradient

Créer un dégradé diagonal avec cette astuce est, techniquement, compliqué.

Pourtant, nous nous appuyons sur 2 pseudo-éléments :before et :after et utilisons linear-gradient . Cette fois, cependant, nous utiliserons 2 linear-gradient dans le pseudo-élément . Et chaque gradient s'étend en opposition les uns aux autres. Voir le code source suivant pour les détails.

Deuxième tour

La seconde méthode consiste à utiliser border-image propriété CSS3 border-image . La propriété border-image dans CSS3 nous permet de remplir la bordure avec une image ainsi que le dégradé CSS3. Le support des navigateurs pour border-image est assez génial; Chrome, Internet Explorer 11, Firefox, Safari et Opera sont tous capables de restituer entièrement l' border-image . Il convient de noter, cependant, que l' border-image ne fonctionnera que sur des formes ou des boîtes rectangulaires. Cela signifie que l'ajout de border-radius va dévier la sortie de l' border-image .

Voici la spécification de la propriété border-image :

 border-image:  ; 

le est le chemin qui spécifie l'image utilisée dans la bordure. Ici, nous allons le remplir avec CSS3 Gradient à la place. Pour obtenir le même résultat que dans les exemples précédents, nous appliquons le dégradé CSS3 dans l' border-image, comme suit.

 .box {largeur: 250px; hauteur: 250px; fond: #eee; bordure: 20px solide transparent; -moz-border-image: -moz-linear-gradient (en haut, # 3acfd5 0%, # 3a4ed5 100%); -webkit-border-image: -webkit-linear-gradient (en haut, # 3acfd5 0%, # 3a4ed5 100%); border-image: linear-gradient (en bas, # 3acfd5 0%, # 3a4ed5 100%); tranche-image-tranche: 1; } 

L' border-image ne montrera rien si nous ne spécifions pas la largeur de la border . Donc, comme vous pouvez le voir ci-dessus, nous ajoutons 20px de largeur de bordure avec une couleur de bordure transparente. Ensuite, nous définissons la valeur de border-image et linear-gradient avec le préfixe du fournisseur pour les versions précédentes de Webkit et Firefox.

L'ajout de border-image-slice montré ci-dessus définira les décalages internes du contenu de la image-border de l' image-border . Cette propriété est requise pour afficher complètement le dégradé dans la zone environnante de la boîte. Voir la sortie ci-dessous:

Cette méthode offre plus de flexibilité pour ajuster le gradient dans toutes les directions possibles; de gauche à droite, de haut en bas, en diagonale ou à un angle. Voici quelques exemples:

Gauche à droite gradient

Diagonal Dégradé

Comment faire un compteur de vitesse animé SVG

Un jauge est un outil qui indique visuellement une valeur dans une plage donnée. Dans les ordinateurs, un «indicateur d'espace disque» utilise un indicateur de jauge pour montrer combien d'espace disque est utilisé par rapport au total disponible. Les jauges ont des zones ou des régions à travers sa gamme, chacune différenciée par sa propre couleur. En dév

(Conseils techniques et de conception)

Comment créer un logo RSS Feed avec CSS3

Cet article fait partie de notre "série de tutoriels HTML5 / CSS3" - destiné à vous aider à devenir un meilleur concepteur et / ou développeur. Cliquez ici pour voir plus d'articles de la même série. Le logo de flux RSS est l'un des logos les plus utilisés dans la conception de sites Web, en raison de la fonction dont il fait référence. Vous ave

(Conseils techniques et de conception)