Comment créer des gradients CSS Conic pour les graphiques circulaires et plus

Les plats clés

• Les gradients coniques, défendus par Lea verou, commencent à obtenir un support de navigateur et peuvent être utilisés pour créer des effets tels que des graphiques circulaires et des roues de couleur. Ils diffèrent des gradients radiaux de cette couleur, les arrêts sont placés le long de la circonférence du cercle, pas la ligne radiale.
• La syntaxe des gradients coniques permet la spécification de l'angle de départ et de la position centrale. S'il est omis, ceux-ci par défaut à zéro et au centre respectivement. Les angles d'arrêt des couleurs pour la première et la dernière couleur sont supposés être 0Deg et 360 degés s'ils ne sont pas spécifiés.
• Les gradients coniques peuvent être utilisés pour créer des graphiques circulaires en fournissant des valeurs de couleurs dures pour différentes couleurs. Chaque couleur du gradient peut recevoir un angle de début et d'extrémité, conduisant à la formation de secteurs distincts. Il existe deux méthodes de spécification de ces valeurs de décalage des couleurs: régler l'angle de démarrage pour chaque couleur à zéro, ou régler l'angle de démarrage de la couleur suivante égale à l'angle d'extrémité de la couleur précédente.
• Les gradients coniques répétitifs acceptent les mêmes valeurs que les gradients de conique réguliers, mais répétez jusqu'à ce que les 360 degrés soient couverts. Cela peut être utilisé pour créer des modèles d'image communs qui nécessitaient auparavant l'utilisation d'images.

De plus en plus de sites Web utilisent des gradients d'une manière ou d'une autre. Certains sites Web les utilisent pour les composants de navigation, tandis que d'autres les utilisent dans des éléments comme des boutons ou avec des images pour créer de beaux effets.

Tous les navigateurs ont pris en charge les gradients de base CSS linéaires et radiaux depuis longtemps maintenant. Les gradients CSS: un article de cours de crash de syntaxe sur SitePoint vous donne un résumé rapide de la syntaxe requise pour créer des gradients linéaires et radiaux, ainsi que de la façon d'utiliser des gradients de répétition pour créer des modèles de base, ce qui est super si vous vous souciez des performances Web des performances Web et essayez d'éviter d'utiliser des images chaque fois que possible.

Après les gradients linéaires et radiaux, les navigateurs commencent maintenant lentement à soutenir les gradients coniques, qui ont d'abord été défendus par Lea verou.

Dans cet article, vous découvrirez la syntaxe, les utilisations et la prise en charge du navigateur pour les gradients coniques simples et la répétition des gradients de conique.

Que sont les gradients coniques?

Les gradients coniques et radiaux sont similaires dans le sens où les deux commencent à partir d'un point spécifié ou par défaut comme le centre du cercle utilisé pour les dessiner. La différence entre les deux est que, dans le cas des gradients radiaux, les arrêts de couleur sont placés le long de la ligne radiale, tandis que dans le cas des gradients coniques, les arrêts de couleur sont placés le long de la circonférence du cercle.

La position des arrêts de couleur pour un gradient conique peut être spécifiée soit en termes de pourcentage, soit en termes de degrés. Une valeur de 0% ou 0deg fait référence au sommet du gradient de conique. Les valeurs continuent d'augmenter progressivement lorsque vous vous déplacez dans le sens des aiguilles d'une montre. Une valeur de 360deg est équivalente à 0deg. Toute couleur dont la valeur de décrochage est supérieure à 100% ou 360 degrés ne sera pas dessinée sur le gradient de conique, mais elle affectera toujours sa distribution de couleurs.

L'image suivante montre un gradient de conique qui commence par une couleur jaune et se termine par orange.

Il est difficile de ne pas remarquer la transition nette qui sépare l'orange à 360 degrés du jaune à 0deg. N'oubliez pas que les gradients coniques produisent toujours cette transition chaque fois que les couleurs de départ et de fin du gradient de conique sont très différentes. Une façon de l'éviter est de définir la couleur de démarrage et de fin à la même valeur.

Syntaxe pour les gradients coniques

Les gradients coniques vous permettent de spécifier leur angle de départ ainsi que leur position centrale. Lorsque ces valeurs sont omises, l'angle est par défaut à zéro et la position par défaut est au centre. Voici la syntaxe des gradients coniques:

<span>conic-gradient([ from <angle> ]? [ at <position> ]?,  <angular-color-stop-list>)</angular-color-stop-list></position></angle></span>

L'angle de décollage de couleurs pour la première et la dernière couleur est supposé être respectivement de 0Deg et 360 degrés, si ce n'est pas spécifié. Le gradient conique jaune-orange de la section précédente pourrait être créé à l'aide des versions suivantes:

<span>background: conic-gradient(from 0deg at center, yellow 0deg, orange 360deg);
</span><span>background: conic-gradient(at center, yellow 0deg, orange 360deg);
</span><span>background: conic-gradient(at 50% 50%, yellow 0deg, orange 360deg);
</span><span>background: conic-gradient(from 0deg, yellow 0deg, orange 360deg);
</span><span>background: conic-gradient(yellow 0deg, orange 360deg);
</span><span>background: conic-gradient(yellow, orange);</span>

Au lieu d'utiliser des diplômes, vous pouvez également utiliser des pourcentages. Comme je l'ai mentionné plus tôt, une valeur de 100% est égale à 360 degrés. Ainsi, une valeur de 50% sera égale à 180 degrés. Si vous savez exactement quelle partie du cercle que vous souhaitez couvrir avec une couleur spécifique, l'utilisation de pourcentages pourrait être plus facile. De même, la position centrale du gradient de conique peut également être spécifiée en termes de pourcentages. Toute des valeurs de gradient conique ci-dessus produira le résultat suivant:

Voir le stylo créant un gradient conique par SitePoint (@SitePoint) sur Codepen.

Tous les navigateurs ne prennent pas en charge les gradients coniques à l'heure actuelle, donc je vais inclure une image de référence avec chaque exemple pour montrer à quoi le résultat final est censé ressembler.

Utilisations des gradients coniques

Vous pouvez utiliser des gradients coniques pour créer différents types de roues de couleur. Par exemple, la démo suivante utilise les couleurs d'un arc-en-ciel dans le gradient de conique pour créer une roue arc-en-ciel.

<span><span>.wheel</span> {
</span>  <span>background: conic-gradient(from 90deg, violet, indigo,  blue, green, yellow, orange, red, violet);
</span>  <span>border-radius: 50%;
</span><span>}</span>

Remarquez comment j'ai mis à la fois la couleur de départ et de fin du gradient conique à Violet pour éviter les transitions soudaines.

Voir le stylo créant un gradient de conique - roue arc-en-ciel par SitePoint (@SitePoint) sur Codepen.

en utilisant des gradients coniques CSS pour les graphiques circulaires

Un autre avantage des gradients coniques est la capacité de créer facilement des graphiques circulaires. Le processus de création de graphiques circulaires est en fait très simple. Tout ce que vous avez à faire est de fournir des valeurs de couleurs dures pour différentes couleurs. Chaque couleur du gradient peut recevoir un angle de début et de fin. Lorsque la valeur de l'angle de démarrage pour la couleur suivante est inférieure ou égale à la valeur de l'angle d'extrémité pour la couleur actuelle, ils afficheront un changement de couleur très net et instantané, ce qui entraînera la formation de secteurs distincts.

Il existe deux façons de spécifier ces valeurs de décalage des couleurs. Le premier consiste à toujours régler l'angle de départ pour chaque couleur à zéro.

La deuxième méthode consiste à définir l'angle de début de la couleur suivante égale à l'angle d'extrémité de la couleur précédente.

Ce que vous décidez enfin de faire, c'est une question de préférence.

l'extrait de code suivant montre la valeur du gradient de conique pour ces deux méthodes côte à côte à titre de comparaison:

<span>conic-gradient([ from <angle> ]? [ at <position> ]?,  <angular-color-stop-list>)</angular-color-stop-list></position></angle></span>

Vous pouvez omettre l'angle de démarrage pour votre premier angle de couleur et de fin pour votre dernière couleur car ils seront réglés sur 0% et 100% respectivement par défaut:

Voir le stylo créant un gradient conique - graphiques à tarte par SitePoint (@SitePoint) sur Codepen.

Utilisation de gradients CSS Conic pour créer des graphiques de beignets

Créer un graphique de beignets n'est qu'une question d'application d'un gradient radial supplémentaire sur votre élément avec des états de couleurs dures. La couleur intérieure du gradient radial peut être réglée sur blanc et la partie extérieure peut être rendue transparente.

<span>background: conic-gradient(from 0deg at center, yellow 0deg, orange 360deg);
</span><span>background: conic-gradient(at center, yellow 0deg, orange 360deg);
</span><span>background: conic-gradient(at 50% 50%, yellow 0deg, orange 360deg);
</span><span>background: conic-gradient(from 0deg, yellow 0deg, orange 360deg);
</span><span>background: conic-gradient(yellow 0deg, orange 360deg);
</span><span>background: conic-gradient(yellow, orange);</span>

Voir le stylo créant un gradient de conique - Charts de beignet par SitePoint (@SitePoint) sur Codepen.

Répéter les gradients de conique

Un gradient conique répétitif accepte toutes les mêmes valeurs qu'un gradient de conique ordinaire. La seule différence est que cette fois, elle continuera de se répéter jusqu'à ce que les 360 degrés soient couverts. Vous pouvez utiliser cette répétition pour créer des modèles d'image communs qui nécessitaient auparavant l'utilisation d'images.

Vous pouvez facilement modifier les graphiques circulaires pour créer des arrière-plans de type Starburst. Tout ce que vous avez à faire est d'utiliser la répétition des gradiements et de réduire la largeur de chaque segment de couleurs par une quantité appropriée.

<span>conic-gradient([ from <angle> ]? [ at <position> ]?,  <angular-color-stop-list>)</angular-color-stop-list></position></angle></span>

De même, vous pouvez créer un motif en damier avec facilité en définissant la largeur de chaque secteur à 25% et en définissant la taille de l'arrière-plan.

L'image suivante montre comment l'extension d'un gradient conique avec quatre secteurs à 90 degrés sur une zone rectangulaire ou carrée peut créer des cartes à damier:

Voici le CSS pour créer un motif en damier:

<span>background: conic-gradient(from 0deg at center, yellow 0deg, orange 360deg);
</span><span>background: conic-gradient(at center, yellow 0deg, orange 360deg);
</span><span>background: conic-gradient(at 50% 50%, yellow 0deg, orange 360deg);
</span><span>background: conic-gradient(from 0deg, yellow 0deg, orange 360deg);
</span><span>background: conic-gradient(yellow 0deg, orange 360deg);
</span><span>background: conic-gradient(yellow, orange);</span>

Voir le stylo de gradient conique répétitif - Checkerboards par SitePoint (@SitePoint) sur Codepen.

Vous pouvez créer beaucoup plus de modèles en faisant varier la taille de différents secteurs ainsi qu'en modifiant l'angle pour les gradients.

Prise en charge du navigateur et polyfills

Au moment de la rédaction de cet article, les gradients Conic sont pris en charge dans Chrome 59 et Opera 46 derrière le drapeau «Entregment des fonctionnalités de plate-forme Web expérimentale». Aucun autre navigateur ne prend en charge cette nouvelle norme, ni par défaut ou derrière un drapeau. Cela signifie que vous devrez attendre un peu avant qu'il y ait suffisamment de support de navigateurs.

Cependant, vous pouvez commencer à utiliser les gradients CSS Conic aujourd'hui à l'aide d'un excellent polyfill CSS conic-gradient () créé par Lea Verou. Il existe également un plugin de gradient CONIC PostCSS qui ajoute automatiquement un secours de gradient conique à vos fichiers CSS.

Réflexions finales

Ce tutoriel vous a montré comment créer des graphiques de tarte et de beignets en utilisant des gradients coniques. Après cela, vous avez appris à créer différents modèles de fond en utilisant uniquement CSS à l'aide de répéter les gradients coniques. Une fois que le support du navigateur est assez bon, vous n'aurez plus à compter sur de grandes bibliothèques ou des images pour accomplir ces tâches.

Pour en savoir plus sur les gradients coniques, ne manquez pas ces ressources:

• le discours de Lea Verou pour CSSConf EU 2015
• CONIQUE Les gradients sectionnent dans les valeurs d'image CSS et le module de contenu remplacé 4
• Spécification initiale de Lea Verou, qui remonte à 2011.

Pouvez-vous suggérer des utilisations uniques pour les gradients coniques sur le Web? Faites-nous savoir dans les commentaires.

Questions fréquemment posées (FAQ) sur les gradients coniques CSS et les graphiques circulaires

Quelle est la signification de la valeur de décalage des couleurs dans les gradients coniques CSS?

La valeur de décalage des couleurs dans les gradients coniques CSS est cruciale car elle détermine la position de chaque couleur dans le gradient. Il est exprimé en pourcentage ou en angle. Par exemple, une valeur d'arrêt de couleurs de 25% ou 90 degrés signifie que la couleur se terminera à un quart du chemin autour du cercle ou à 90 degrés respectivement. La manipulation de ces valeurs vous permet de créer des effets de gradient unique.

Comment puis-je créer une transition en douceur entre les couleurs dans un gradient de conique?

Pour créer une transition lisse entre les couleurs dans un gradient conique, vous pouvez utiliser plusieurs valeurs d'arrêt de couleurs. En plaçant les couleurs, vous pouvez créer une transition lisse et progressive entre les couleurs. Plus les couleurs sont étroites, plus la transition sera fluide.

Puis-je utiliser les gradients CSS Conic pour créer un graphique à secteurs? Comment?

Oui, vous pouvez utiliser les gradients CSS Conic pour créer un graphique à secteurs. En définissant différentes valeurs d'arrêt des couleurs, vous pouvez créer des sections de différentes couleurs qui ressemblent à un graphique à tarte. Vous pouvez ensuite utiliser ces sections pour représenter différents points de données.

Pourquoi mes gradients de conique ne s'affichent-ils pas correctement dans certains navigateurs?

Tous les navigateurs ne prennent pas en charge les gradients coniques CSS. Par exemple, Internet Explorer et certaines versions de Microsoft Edge ne les prennent pas en charge. Pour vous assurer que vos gradients s'affichent correctement sur tous les navigateurs, envisagez d'utiliser une couleur d'arrière-plan de secours ou un polyfill.

Comment puis-je créer un gradient radial avec des gradients coniques CSS?

Pendant que les gradients CSS coniques créent un Gradient qui rayonne autour d'un point central, les gradients radiaux du CSS créent un gradient qui rayonne à partir d'un point central. Pour créer un gradient radial, vous utiliseriez la fonction radiale-gradient () au lieu de la fonction conique-gradient ().

Puis-je utiliser des variables CSS avec des gradients coniques?

Oui, vous Peut utiliser des variables CSS avec des gradients coniques. Cela vous permet de créer des styles plus dynamiques et flexibles. Vous pouvez définir une variable CSS avec une valeur spécifique, puis utiliser cette variable dans votre gradient de conique.

Comment puis-je animer un gradient conique CSS?

Vous pouvez animer un gradient conique CSS en utilisant Animations ou transitions CSS. Par exemple, vous pouvez animer la rotation du gradient, ou animer les valeurs de décalage des couleurs pour créer un gradient qui change avec le temps.

Puis-je utiliser des couleurs transparentes dans un gradient conique CSS?

Oui, vous pouvez utiliser des couleurs transparentes dans un gradient CSS Conic. Cela peut créer des effets visuels intéressants, comme un gradient qui s'estompe en transparence.

Comment puis-je créer un gradient conique répétitif?

Pour créer un gradient conique répétitif, vous pouvez utiliser la répétition- Fonction conique-gradient (). Cela vous permet de créer un motif de gradient qui se répète autour du cercle.

Puis-je utiliser des gradients CSS Conic avec d'autres propriétés CSS?

Oui, vous pouvez utiliser des gradients CSS Conic avec d'autres propriétés CSS. Par exemple, vous pouvez utiliser un gradient de conique comme arrière-plan d'un élément de texte, puis appliquer d'autres propriétés CSS à ce texte, tels que la couleur, la taille de la police et le text-shadow.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!