Une feuille de style CSS décrit comment les pages Web sont présentées, y compris leurs couleurs, leurs dispositions et leurs polices. Il existe de nombreuses propriétés qui sont utilisées pour créer des pages Web attrayantes, telles que la couleur, l'arrière-plan, l'image d'arrière-plan, le gradient et bien d'autres. Plus précisément, les gradients sont utilisés pour ajouter plusieurs couleurs à l'arrière-plan.

Dans cet article, nous discuterons des gradients CSS. Alors, commençons!

Que sont les gradients CSS?

Dans CSS, le «pente"Vous permet d'afficher en douceur la transition entre différentes couleurs. Vous pouvez également afficher différentes couleurs à la fois pour améliorer l'apparence des éléments HTML. Il existe trois types de gradients qui sont:

• Gradient linéaire
• Gradient radial
• Gradient conique

Maintenant, nous explorerons chacun des types de gradient mentionnés un par un! À cette fin, nous allons d'abord créer une div dans le HTML et ensuite appliquer un «pente«À lui.

Exemple

Dans HTML, nous créerons un conteneur ou une div avec le nom de classe "div"Et à l'intérieur du"”Tag, ajoutez un titre

.

Html

Pente

Maintenant, nous allons passer au fichier CSS et utiliser "div«Pour accéder au conteneur créé en HTML et définir la hauteur de la div comme«200px". Après cela, définissez la couleur de la rubrique comme «RVB (1, 32, 4)"Et la taille de la police comme"35px". Ensuite, ajoutez la bordure autour de la div, largeur comme «5px», Style comme«crête», Et la couleur comme«RVB (0, 0, 0)".

CSS

div
hauteur: 200px;
Couleur: RVB (1, 32, 4);
taille de police: 35px;
Border: 5px Ridge RVB (0, 0, 0);

En utilisant le code ci-dessus, la sortie suivante est obtenue:

Maintenant, nous appliquerons les types de dégradé dans le div.

Quels sont les gradients linéaires CSS?

Pour générer un dégradé linéaire, le «gradient linéaire()«La fonction du CSS est utilisée comme valeur du«image de fond" ou "arrière-plan" propriété. Avec cette fonction, une image composée d'une progression en forme de ligne de différentes couleurs peut être créée. Il existe différents types de gradients linéaires, tels que répéter les gradients linéaires, les gradients de gauche à droite et les gradients de droite à gauche.

Syntaxe

La syntaxe du «gradient linéaire()»La fonction est:

Image d'arrière-plan: gradient linéaire (direction, couleur-1, couleur-2,…);

Ici le "direction”Le paramètre est utilisé pour définir la direction du gradient linéaire à partir de laquelle la transition commencera pour le haut, la droite, la gauche et le bas. Vous pouvez ajouter plusieurs couleurs à cette fonction.

Pour continuer l'exemple précédent, nous appliquerons un simple «gradient linéaire()”Fonction à la div.

Exemple

Ici, nous utiliserons le «gradient linéaire()«Fonction dans le«image de fond«Propriété et ajoutez la direction comme«en haut» c'est la direction par défaut de la fonction. Après cela, nous ajouterons trois couleurs comme «RVB (0, 255, 213)","RVB (187, 255, 0)", et "RVB (51, 255, 0)"Pour notre dégradé:

div
…
Image d'arrière-plan: gradient linéaire (en haut, RVB (0, 255, 213), RVB (187, 255, 0), RVB (51, 255, 0));

Dans l'image ci-dessous, vous pouvez voir qu'un gradient linéaire est généré:

Maintenant, passez au type suivant dans lequel nous changerons la direction du gradient linéaire comme «à droite".

Gradient linéaire à droite

Pour générer un gradient linéaire à droite, nous changerons la direction de «en haut" pour " à droite"Et définissez cinq couleurs différentes comme"RVB (32, 42, 134)","RVB (202, 231, 255)","RVB (0, 255, 170)","RVB (85, 250, 79)", et "RVB (128, 243, 138)»:

div
…
Image d'arrière-plan: gradient linéaire (à droite, RVB (32, 42, 134), RVB (202, 231, 255), RVB (0, 255, 170), RGB (85, 250, 79), RVB (128 , 243, 138));

Dans la sortie ci-dessous, vous pouvez voir que le gradient linéaire est créé dans la bonne direction:

Ensuite, nous changerons la direction du gradient linéaire à «à gauche".

Gradient linéaire à gauche

Ici, nous changerons la direction en «à gauche". Les couleurs seront utilisées de la même manière que dans l'exemple ci-dessus:

div
…
Image d'arrière-plan: gradient linéaire (à gauche, RVB (32, 42, 134), RVB (202, 231, 255), RVB (0, 255, 170), RGB (85, 250, 79), RVB (128 , 243, 138));

Vous pouvez voir à partir de la sortie ci-dessous que le gradient linéaire à gauche est parfaitement créé:

Vous pouvez également créer une transition répétitive des couleurs. Alors, faisons ça!

Répéter les gradients linéaires

Pour créer des gradients linéaires répétitifs, le «répétitif linéaire ()»La fonction est utilisée. Dans ce type de gradient linéaire, la séquence de la couleur est répétée en fonction de la valeur donnée.

Syntaxe

La syntaxe du «répétitif linéaire ()" est:

Image d'arrière-plan: Répédiation-gradient (couleur couleur-stop, couleur couleur-stop,…);

Dans la syntaxe ci-dessus, "couleurs-arrêt"Est utilisé pour régler la distance entre les premiers et dernières arrêts de couleur qui déterminent la longueur du gradient qui se répète.

Continuons avec l'exemple précédent.

Exemple

Ici, nous allons définir la couleur du texte comme «blanc»Et ajoutez la valeur des couleurs de dégradé dans le«répétitif linéaire ()" les fonctions. Outre chaque couleur, nous spécifierons le «Longueur d'arrêt de couleur" comme "0px","20px", et "40px". Il est utilisé pour répéter les couleurs après la longueur donnée:

div
…
Couleur blanche;
Image d'arrière-plan: répétitif linéaire-gradient (RVB (122, 12, 145) 0px, RGB (171, 76, 209) 20px, RGB (13, 0, 128) 40px);

Note: Sans le "couleurs-arrêt«Valeur, le gradient linéaire ne peut pas être défini pour la répétition.

Dans l'image ci-dessous, vous pouvez voir que le gradient linéaire est répété:

Quels sont les gradients radiaux CSS?

Un gradient radial est une transition des couleurs où la transition commence de l'origine de l'élément. Pour créer un dégradé radial, le «Radial-Gradient ()«La fonction est utilisée dans laquelle vous pouvez spécifier la forme de la transition et des couleurs.

Syntaxe

La syntaxe du «Radial-Gradient ()»La fonction est:

Image d'arrière-plan: gradient radial (forme, couleur start,…, dernier couleur);

Vous pouvez définir la forme du "Radial-Gradient ()«Fonctionne comme un«ellipse" ou "cercle".

Exemple

Ici, nous continuerons l'exemple précédent et utiliserons le «Radial-Gradient ()»Fonction pour définir la forme de la transition comme«ellipse". Ensuite, nous ajouterons cinq couleurs différentes comme «RVB (17, 0, 255)","RVB (0, 174, 255)","RVB (109, 250, 255)","RVB (0, 190, 79)", et "RVB (2, 70, 2)»:

div
…
Image en arrière-plan: gradient radial (Ellipse, RVB (17, 0, 255), RVB (0, 174, 255), RVB (109, 250, 255), RGB (0, 190, 79), RVB (2, 70, 2));

L'image fournie ci-dessous indique que la transition de la couleur a commencé avec succès à partir de l'origine de l'élément:

Maintenant, nous allons passer au dernier type de dégradé.

Quels sont les gradients CSS Conic?

Le "gradient conique ()»La fonction est utilisée pour créer un gradient conique. C'est un dégradé où les transitions des couleurs sont tournées autour d'un point central. Afin de créer un gradient conique, au moins deux couleurs doivent être définies.

Syntaxe

La syntaxe du «gradient conique ()»La fonction est:

Image d'arrière-plan: gradient conique (couleur, couleur,… couleur);

Vous pouvez définir plusieurs couleurs dans la fonction du «gradient conique ()".

Passons à l'exemple dans lequel nous créerons le gradient conique.

Exemple

Nous allons maintenant définir la couleur de la rubrique comme «blanc". Ensuite, utilisez le «gradient conique ()«Fonctionne et créez un gradient de conique arc-en-ciel en ajoutant des couleurs arc-en-ciel, comme«rouge","orange","jaune","vert","bleu","indigo", et "violet»:

div
Couleur blanche;
Image de fond: Gradient conique (rouge, orange, jaune, vert, bleu, indigo, violet);

Voici le résultat qui démontre que le gradient conique est créé avec succès:

C'est ça! Nous avons expliqué le gradient CSS en détail.

Conclusion

Le CSS "pente"Vous permet d'afficher des transitions lisses entre deux ou plusieurs couleurs spécifiées. Il existe trois types de fonctions de gradient utilisée comme valeur de «arrière-plan«Propriété dans CSS, comme«gradient linéaire()","Radial-Gradient ()", et "gradient conique ()". Dans ce manuel, nous avons expliqué en détail le gradient CSS et ses types en détail.