Gradient de fond CSS | Expliqué

Une couleur de dégradé est une couleur composée de deux nuances ou plus. En développement Web, les concepteurs utilisent différentes couleurs dans des applications pour les rendre visuellement attrayants. Plus précisément, les gradients CSS sont une classe d'image unique qui fournit un changement progressif entre les couleurs complémentaires. Ces gradients sont de trois types principaux: linéaire, radial et conique. Vous pouvez les utiliser pour ajouter des couleurs dégradées aux éléments.

Ce tutoriel fournira un guide détaillé sur ce que sont les gradients CSS.

Quels sont les types de gradients CSS?

Les types de fonctions de gradient CSS sont répertoriés ci-dessous:

• gradient linéaire()
• gradient conique ()
• Radial-Gradient ()
• répétitif-linéaire-gradient ()
• répétitif-cicon-gradient ()
• répétitif-radial-gradient ()

Chaque propriété sera discutée en détail avec des démonstrations pratiques.

Méthode 1: Comment ajouter un gradient linéaire dans CSS?

Dans CSS, un gradient linéaire est créé avec le «gradient linéaire()" fonction. Pour l'utiliser, consultez l'exemple suivant.

Exemple 1: Ajout d'un gradient linéaire simple dans CSS

Dans HTML, à l'intérieur de l'élément corporel, ajoutez une div avec plusieurs classes "rectangle simple gradient". Nous ferons une boîte avec un contenu de classe div sur lequel nous appliquerons différentes propriétés de gradient.

Html

Les deux classes mentionnées dans le code HTML sont appliquées avec des styles à l'aide de CSS.

Style «rectangle» div

.rectangle
Largeur: 90%;
hauteur: 200px;
marge: auto;

Ici:

"largeur" et "hauteur«La propriété est détermine la taille de l'élément verticalement et horizontalement. "marge»La propriété génère un espace égal autour de l'élément.

Div de style «simple-gradient»

.Gradient simple
Contexte: Linear-Gradient (bleu, noir);

Le div gradient simple reçoit la propriété "arrière-plan"Avec la valeur"gradient linéaire()" fonction. Cette fonction est dotée de deux couleurs, bleu et noir, comme paramètres.

Enregistrez le fichier et ouvrez-le dans le navigateur. La sortie sera affichée comme indiqué ci-dessous:

Exemple 2: Ajout d'un gradient linéaire en utilisant des angles dans CSS

Pour contrôler la direction des couleurs, les angles peuvent également être spécifiés comme suit:

.Gradient d'angle
CONTEXTE: Gradient linéaire (40 degrés, jaune, rouge);

Sortir

Exemple 3: Ajout de gradient linéaire en utilisant plus de deux couleurs dans CSS

Il n'est pas limité à l'utilisation de deux couleurs seulement. En tant que designer, vous pouvez utiliser autant de couleurs que vous le souhaitez. Par défaut, les couleurs sont uniformément espacées. Par exemple:

Contexte: Linear-Gradient (# 181818, # 8758FF, # EAF290, # 5CB8E4, # F2F2F2, # 182747);

Sortir

Exemple 4: Ajout d'un gradient linéaire en spécifiant les arrêts de couleur en pourcentages dans CSS

Ici, les couleurs spécifiées avec les pourcentages commencent à cette valeur spécifiée:

Contexte: Linear-Gradient (à gauche, # 00F5FF 20PX, # FCE700 40%, # FF6D28 60%, # EA047E 2PX);

Sortir

Exemple 5: Ajout d'un gradient linéaire pour les lignes dures dans CSS

Pour faire une ligne dure entre les couleurs, les deux ou plusieurs arrêts de couleur sont utilisés au même endroit. Dans la fonction linéaire-gradient () d'abord, spécifiez la direction, puis les couleurs avec pourcentage:

CONTEXTE: Gradient linéaire (en haut à droite, # 00ABB3 45%, # 3C4048 45%);

En fournissant le même emplacement aux couleurs, nous obtenons le résultat comme affiché dans l'image ci-dessous:

Exemple 6: Ajout d'un gradient linéaire en utilisant des conseils de couleur dans CSS

Le gradient passe uniformément de couleur à la couleur. Vous pouvez spécifier l'indice de couleur pour déplacer le point médian de la transition. Le pourcentage est défini sur «50%«Pour que le gradient passe la couleur du bleu au rouge:

CONTEXTE: GRADIÉ LINÉAIRE (bleu, 50%, rouge);

Sortir

Méthode 2: Comment ajouter le gradient de conique dans CSS?

Un gradient conique spécifie les transitions de couleurs tournées autour d'un centre. Il est conçu en utilisant le «gradient conique ()" fonction. Pour l'utiliser, au moins deux couleurs doivent être définies. De plus, par défaut, l'angle est «0«Deg et la position est définie comme«centre".

Syntaxe

Image d'arrière-plan: gradient conique ([de l'angle] [en position,] couleur [degré], couleur [degré],…);

La fonction conique-gradient () reçoit trois couleurs comme paramètres:

Image d'arrière-plan: Gradient conic (# FF5858, # E0144C, # 9A1663);

Sortir

Exemple 1: ajout de la conique-carte à tarte dans CSS

La fonction conique-gradient () nous fournit la facilité pour créer des graphiques circulaires. Pour cela, il est nécessaire de spécifier les couleurs avec des angles de début et de fin. Plus précisément, pour créer des secteurs de couleur distincts, la valeur d'angle de démarrage de la couleur suivante doit être égale ou inférieure à la valeur d'angle d'extrémité de la première couleur.

Contexte: Gradient conique (bleu 50deg, rouge 50deg 120deg, orange 120deg);

Sortir

Exemple 2: Ajout de gradient de conique en utilisant des angles dans CSS

Le gradient conique est circulaire et le centre de l'élément agit comme le point source de l'arrêt de couleur. Il y a 0 degrés à 360 degrés dans l'angle de gradient conique:

Image d'arrière-plan: gradient conique (à partir de 70Deg, # F1d4d4, # 6A097D);

On peut voir que la couleur a tourné à partir du 70deg:

Méthode 3: Comment ajouter un gradient radial dans CSS?

Un gradient radial peut être créé avec le «Radial-Gradient ()" fonction. Cette fonction produit une image qui consiste en une transition progressive entre plusieurs couleurs utilisées pour rayonner du point central. Ce pourrait être une ellipse ou un cercle.

Le code ci-dessous montre le «arrière-plan”Propriété avec la valeur en tant que fonction de gradient radial:

Contexte: Radial-Gradient (Circle, RGBA (241, 151, 216, 1) 28%, RGBA (148, 187, 233, 1) 59%);

Sortir

Exemple: ajouter un radial non centré dans CSS

L'exemple ci-dessous montre comment faire un gradient radial non centré.

Image d'arrière-plan: gradient radial (le plus éloigné à 60px 90px,
# FF9F30 0%,
# B60C3C 100%);

Sortir

Méthode 4: Comment ajouter des gradients linéaires répétés dans CSS?

La fonction "répétitif-linéaire-gradient ()”Conçu une image en répétant les gradients linéaires. Il prend les paramètres sous forme de couleurs, de degrés ou de pourcentages.

CONTEXTE: Répéditation linéaire-gradient (25Deg, # 00A8CC, # 142850 23.3%);

Sortir

Méthode 5: Comment ajouter des gradients radiaux répétés dans CSS?

Le "répétitif-radial-gradient ()»La fonction génère une image consistant à répéter des gradients qui rayonnent du centre.

Contexte: Répéter-radial-gradient (# 313131, # CA3E47 30%);

Sortir

Méthode 6: Comment ajouter des gradients coniques répétitifs dans CSS?

Le "répétitif-cicon-gradient ()»La fonction produit une image composée d'un gradient répétitif. Ces transitions de couleurs tournent autour d'un point central.

Voici un exemple pour démontrer le gradient de conique répétitif:

Contexte: répétitif-collé-gradient (à partir de 74 degrés à 86% 50%,
# A21232 0DEG 15DEG,
# 1A1831 10DEG 21DEG,
# DECE9C 20DEG 31DEG);

Sortir

De cette façon, les gradients de fond CSS sont utilisés dans CSS.

Conclusion

HTML fournit de nombreuses méthodes pour rendre les documents attrayants et attrayants. Ces méthodes incluent les couleurs, la mise en forme du texte, les gradients et plus. Les gradients CSS sont les images spéciales qui affichent les transitions de couleurs entre deux couleurs ou plus. L'élément d'arrière-plan utilise principalement des fonctions de gradient. Cet article fournira un guide sur le gradient de fond CSS.