Gradients coniques dans CSS

Les feuilles de style en cascade (CSS) vous permet d'ajouter du style à vos pages Web de nombreuses façons en fournissant une gamme de propriétés et de méthodes très gigantesques. En dehors de ceux-ci, CSS fournit également des gradients qui permettent l'affichage d'une transition uniforme de différentes couleurs.

Il y a un total de trois gradients spécifiés dans le CSS qui sont, gradient linéaire, gradient radial et gradient conique. Dans ce tutoriel, nous discuterons des gradients coniques et apprendrons à les utiliser.

Qu'est-ce qu'un gradient conique en CSS

Dans CSS, un gradient conique est une fonction intégrée qui vous permet d'ajouter des gradients sous forme d'images d'arrière-plan avec des transitions de couleurs autour d'un point médian.

Syntaxe

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

Vous devez spécifier au moins deux couleurs pour faire fonctionner le conique-gradient (), en outre, si vous ne spécifiez pas le degré de couleur, les couleurs se propagent uniformément autour du point médian.

Explorons quelques exemples.

Exemple 1

L'exemple ci-dessous montre le fonctionnement du conique-gradient () en utilisant trois couleurs.

Html

Ici, nous créons simplement un conteneur Div pour illustrer le fonctionnement des gradients coniques.

CSS

.div
hauteur: 180px;
Largeur: 180px;
Image d'arrière-plan: gradient conique (rouge, vert, bleu);

La hauteur et la largeur de la div sont définies à 180px et nous attribuons trois couleurs de base à la fonction conique (). Étant donné qu'aucun degré de couleurs n'est spécifié, ces couleurs se propageront donc uniformément sur le milieu du conteneur div.

Sortir

Un gradient conique avec trois couleurs.

Exemple 2

L'exemple ci-dessous montre le fonctionnement du conique-gradient () en utilisant quatre couleurs.

CSS

.div
hauteur: 180px;
Largeur: 180px;
Image d'arrière-plan: gradient conique (rose, violet, vert, jaune);

Ici, nous avons attribué quatre couleurs à la fonction conique-gradient ().

Sortir

Un dégradé conique avec quatre couleurs.

Maintenant que nous avons une bonne compréhension du concept, explorons comment ajouter des diplômes aux gradients coniques de CSS à l'aide de quelques exemples.

Exemple 3: comment ajouter des degrés au gradient conique

L'exemple ci-dessous montre la façon dont vous pouvez spécifier les degrés avec les couleurs du gradient conique.

CSS

.div
Image de fond: Gradient conique (rose 45 degère, violet 90deg, jaune 230deg);

Dans le code ci-dessus, nous spécifions trois couleurs ainsi que le degré pour chaque couleur.

Sortir

Un gradient conique avec des degrés de couleur spécifiés.

Exemple 4: Comment faire des graphiques circulaires en utilisant des gradients coniques

Dans le but de faire un graphique à sec.

CSS

.div
hauteur: 180px;
Largeur: 180px;
Border-Radius: 50%;
Image d'arrière-plan: gradient conique (rouge, vert, bleu);

Le rayon frontalier de l'élément div a été fixé à 50%.

Sortir

Une forme à sec artante a été générée avec succès.

Vous pouvez maintenant créer un graphique à secteurs en spécifiant la gamme de degrés de couleur dans la fonction conique-gradient () comme indiqué dans l'extrait de code CSS ci-dessous:

CSS

.div
hauteur: 180px;
Largeur: 180px;
Border-Radius: 50%;
Image d'arrière-plan: Gradient conique (rouge 0deg, rouge 90Deg,
Green 90deg, vert 180,
Blue 180deg, bleu 270deg,
Jaune 270 dedeg, jaune 360 ​​degrés);

Dans le code ci-dessus, nous avons spécifié quatre couleurs qui sont rouges, vert, bleu et jaune. Maintenant, pour chaque couleur, un degré horizontal et vertical a été spécifié, couvrant ainsi les 360 degrés de cercle.

Sortir

Un graphique à pile avec des degrés de couleur définis.

Exemple 5: Comment ajouter un gradient conique sous un angle spécifique

Dans le but d'ajouter des gradients coniques sous un angle particulier, vous devez spécifier cet angle dans la fonction conique (). Voici comment tu fais.

CSS

.div
hauteur: 180px;
Largeur: 180px;
Border-Radius: 50%;
Image d'arrière-plan: gradient conique (à partir de 270 degrés, rouge, vert, bleu);

Ici, nous avons spécifié que les couleurs rouges, vert et bleu devraient être réparties uniformément sous un angle de 270 degrés.

Sortir

Un graphique à secteurs de gradient conique sous un angle spécifié est ajouté avec succès.

Exemple 6: Comment ajouter un gradient conique d'une position spécifique

Puisque nous savons que les couleurs dans un gradient conique se propagent uniformément sur un point médian, en définissant la position, nous définissons réellement le point médian du gradient conique. Considérez l'exemple pour apprendre à faire cela.

CSS

.div
hauteur: 180px;
Largeur: 180px;
Border-Radius: 50%;
Image d'arrière-plan: gradient conique (à 30% 45%, rouge, vert, bleu);

Dans le code ci-dessus, nous avons défini la position de point médian à 30% 45%.

Sortir

Un gradient conique d'une position spécifiée est ajouté.

Exemple 7: Comment répéter un gradient conique

Aux fins de répéter un gradient conique, utilisez la fonction répétitive-cic-gradient (). Considérez l'exemple ci-dessous.

CSS

.div
hauteur: 180px;
Largeur: 180px;
Border-Radius: 50%;
IMAGE D'ABJECTIF: Répéditation-gradient-gradient (rose 10deg, rose 20deg, jaune 20deg, jaune 30 dedeg);

Ici, nous utilisons la fonction répétitive-cic-gradient () et en utilisant deux couleurs ainsi que la spécification de leurs diplômes.

Sortir

Un gradient de conique répété a été inséré

Conclusion

Un gradient conique dans CSS est une fonction intra-construite qui vous permet d'ajouter des gradients avec des transitions de couleur autour d'un point médian. Vous devez spécifier au moins deux couleurs pour faire un gradient conique. Il y a beaucoup de choses amusantes que vous pouvez faire à un gradient conique, comme spécifier des degrés de couleur, des angles ou une position. D'ailleurs, en utilisant les gradients coniques, vous pouvez également faire des tartes. Dans cet article, nous avons discuté des gradients coniques ainsi que de nombreux exemples.