Les gradients de CSS ont expliqué
Un gradient fait référence à une image avec des effets de transition, et un gradient peut être utilisé n'importe où comme des images. Les gradients sont créés à l'aide de CSS, et il propose de créer des gradients avec des propriétés étendues. Par exemple, un gradient peut être linéaire, radial ou conique. Chaque type de gradient est assisté par la fonction respective.
Dans cet article, nous avons fourni un aperçu des gradients du CSS et les résultats d'apprentissage suivants sont attendus.
- Types de gradients dans CSS
- Fonction linéaire-gradient ()
- fonction radiale-gradient ()
- fonction conique-gradient ()
Types de gradient en CSS
Le gradient peut être divisé en trois catégories, linéaire, radial et conique. Les sections à venir présenteront les bases de chaque type de gradient et comment elles sont utilisées dans CSS.
Gradient linéaire
Le gradient linéaire peut être appliqué pour obtenir l'effet de transition dans une dimension linéaire (une direction en même temps).
Comment utiliser la fonction linéaire-gradient ()
La fonction linéaire-gradient () vous permet de créer un gradient linéaire avec divers effets.
Image d'arrière-plan: gradient linéaire (Direction, Color1, Color2,…);Le direction du gradient linéaire peut accepter les valeurs suivantes
à droite: utilisé pour montrer le gradient de gauche à droite
à gauche: pour montrer le dégradé de droite à gauche
en bas (par défaut): vers le bas
en haut: montre l'effet de gradient du bas en haut
De plus, l'effet de gradient linéaire peut également être appliqué en diagonale en utilisant les valeurs suivantes du direction paramètre.
en bas à droite: Le dégradé commencera en haut à gauche et se penche vers le bas à droite
en bas à gauche: Le dégradé commence du coin supérieur droit vers le bas à gauche
Pour en tête à droite: commence du coin inférieur gauche vers le haut à droite
en haut à gauche: du bas à droite en haut à gauche
Exemple
Le code suivant pratique l'utilisation du gradient linéaire sur un élément HTML.
Html
Gradient linéaire
Le code ci-dessus crée un et un
élément à l'intérieur de cette div.
CSS
Le code ci-dessus utilise un gradient linéaire avec les valeurs suivantes
- La direction est définie sur «de gauche à droite"
- La valeur de Color1 et Color2 est définie sur violet et lincereen respectivement
Sortir
Comme la direction du gradient était de gauche à droite, donc le violet La couleur commence par la gauche alors que le LightEagreencolor démarre de la droite.
Gradient radial
Comme son nom le montre, le gradient radial est généré à partir du point central de l'image. L'effet de transition peut être généré sous la forme d'un cercle ou d'une éclipse.
Comment utiliser la fonction radiale-gradient ()
Un gradient radial peut être créé en suivant la syntaxe fournie ci-dessous.
Image d'arrière-plan: gradient radial (taille de forme en position, Color1, Color2…);Dans la syntaxe ci-dessus,
- le forme (la valeur par défaut est une ellipse) pourrait être une ellipse ou un cercle
- le taille (la valeur par défaut est le plus éloigné) peut accepter le plus de coins le plus éloigné / le plus éloigné, le plus proche / le plus proche curner.
- le pente commencera de couleur 1 (au centre soit en forme d'éclipse, soit en forme de cercle) suivi de couleur2 et ainsi de suite.
Exemple
Le code écrit ci-dessous montre la création du gradient radial.
Html
Gradient radial
CSS
Le CSS ci-dessus crée un gradiennt radial avec color1 = ”vert”, color2 = ”jaune” et colore3 = ”rouge”.
Sortir
Il est observé à partir de la sortie que le gradient a commencé avec une couleur verte, entourée de jaune, et le rouge est à la fin.
Gradient conique
Le gradient conique est utilisé pour créer un gradient de telle manière que chaque couleur commence et tourne autour du centre. Ils sont similaires à un gradient radial, mais les couleurs sont arrêtées au bord de la forme alors que la couleur dans les gradations radiales s'arrête
Comment utiliser le gradient conique
Le gradient conique peut être créé en suivant la syntaxe fournie ci-dessous:
Image d'arrière-plan: gradient conique (de l'angle en position, couleur1La syntaxe ci-dessus est décrite ci-dessous,
- le "de l'angle»Définit la rotation du gradient dans le sens des aiguilles d'une montre et le« «en position»Définit le début du gradient conique.
- le couleur définit la couleur et la condition d'arrêt pour cette couleur.
- le «De l'angle», «en position» et sont des paramètres facultatifs
Exemple
L'exemple suivant montre comment un gradient conique peut être créé
Html
Gradient conique
CSS
Dans le code ci-dessus, la fonction conique-gradient () est utilisée qui crée un gradient ayant vert, jaune et rouge.
Sortir
Comme les valeurs par défaut pour les paramètres d'angle sont utilisées, le gradient a donc commencé à partir du centre avec l'angle de rotation de 0 dedegree.
Conclusion
Un gradient est une image avec des effets transitoires ou solides, et il est créé à l'aide de CSS. Un gradient peut être créé avec diverses fonctionnalités et types tels que le gradient linéaire, le gradient radial ou. Cet article démontre le travail et l'utilisation du gradient dans CSS. Le gradient linéaire crée un effet de gradient dans une seule direction tandis que le radial et la conique peuvent être utilisés pour les effets rotatifs.