conic-gradient() - Fonction CSS
Résumé des caractéristiques de la fonction conic-gradient()
Description de la fonction conic-gradient()
.
La fonction conic-gradient()
définit un dégradé de couleurs conique.
Ce type de dégradé évolue autour du centre, contrairement au dégradé radial qui
évolue à partir du centre.
Si les couleurs sont bien choisies, le résultat peut suggérer un cône vu de dessus, d'où le
nom "conique".
Ce type de dégradé est parfois nommé "dégradé angulaire".
Voici un comparatif des trois types de dégradé : linéaire, radial et conique.
Dégradé conique
Dégradé radial
Dégradé linéaire
Reportez-vous à la page linear-gradient()
pour des explications plus détaillées et une présentation générale des dégradés en CSS.
La fonction conic-gradient() peut être utilisée avec :
background-image
: Image d'arrière-plan.border-image
: Résumé des propriétés des bordures réalisées avec des images.list-style-image
: Définit une image à utiliser à la place des puces.mask-image
: Désigne l'image ou le fichier SVG qui sera utilisé comme masque.
Syntaxe de la fonction conic-gradient()
.
La fonction conic-gradient()
, comme les autres fonctions de dégradé, accepte de multiples syntaxes :
colour
est une couleur décrite via l'une des nombreuses syntaxes reconnues par CSS.x
ety
sont les coordonnées du centre du dégradé. Ce sont soit des nombres suivis d'une unité de dimension, soit des pourcentages.angle1
est l'angle de début du dégradé.angle2
est l'angle de début de la couleur.angle3
est l'angle de fin de la couleur.angle4
est l'angle du milieu du dégradé entre deux couleurs.angle1
àangle4
peuvent être soit un nombre suivie d'un unité d'angle, soit un pourcentage.
- background-image: conic-gradient(blue, pink, gold); c1 c2 c3
c1
,c2
, etc. désignent les couleurs du dégradé, dans n'importe laquelle des notations reconnues par CSS : code hexadécimal, couleur nommée, RGB ou HSL, etc. Voir les couleurs CSS.Deux couleurs au moins doivent être précisées : il n'y a pas de limite maximale sur le nombre de couleurs.
Le dégradé conique revient sur lui-même. Pour éviter une rupture brutale entre la couleur de départ et la couleur de fin, il suffit que la première et la dernière couleur soient identiques.
Remarque : nos exemples sont présentés dans des cercles car les dégradés coniques sont bien adapté aux formes circulaires. Un élément rond s'obtient facilement avec
border-radius:50%
. - background-image: conic-gradient(from 45deg, blue, pink, gold); a c1 c2 c3
Le paramètre
a
désigne l'angle de départ du dégradé. Par défaut le dégradé commence en haut (angle=0). Les angles évoluent ensuite dans le sens horaire.L'angle est introduit par le mot
from
. C'est une valeur numérique positive ou négative, suivie d'une unité d'angle (voir les unités CSS d'angle). - background-image: conic-gradient(at 50% 40%, blue, pink); x y c1 c2
x
ety
désignent les coordonnées du centre autour duquel le dégradé se déroule. Par défaut le centre du dégradé est au centre de l'élément.x
ety
sont deux valeurs numériques positives ou négatives, suivies d'une unité de dimension (voir les unités CSS de dimension). S'il s'agit de pourcentages, ils sont calculés par rapport aux dimensions de l'élément (la largeur pourx
, et la hauteur poury
).
x
ety
peuvent être des valeurs négatives ou des pourcentages supérieurs à100%
. Dans ce cas le centre du dégradé se situe en dehors de l'élément.Des valeurs prédéfinies peuvent être également utilisées à la place des valeurs numériques :
Pourx
:right
,left
,center
.
Poury
:top
,bottom
,center
. - background-image: conic-gradient(blue 0%, pink 10%, gold 20%, blue 100%); c1 p1 c2 p2 c3 p3 c4 p4
p1
,p2
, etc. désignent les positions des couleurs. Par défaut les couleurs se répartissent également sur la circonférence du dégradé.Ce sont des valeurs numériques positives ou négatives, suivies d'une unité d'angle (voir les unités CSS d'angle). S'il s'agit de pourcentages, ils sont calculés par rapport à une révolution complète de 360 degrés.
- background-image: conic-gradient(blue 0% 40%, pink 60% 100%); c1 p1 p1' c2 p2 p2'
Pour chacune des couleurs, deux positions ont été indiquées. La couleur ne varie pas entre ces deux positions. On peut considérer que
p1
est la position de début de la couleurc1
et quep1'
est sa position de fin de cette couleur. Le dégradé ne se fait que entrep1'
etp2
. - background-image: conic-gradient(blue, 75%, pink); c1 p3 c2
La valeur
p3
et exprimée en angle ou en pourcentage, entre deux virgules. La syntaxe ne l'associe à aucune des couleurs du dégradé. Elle précise à quel endroit se trouve le milieu du dégradé.Bien entendu, cette syntaxe ext mixable avec les autres déjà vues.
Exemples de rendus utilisant un dégradé conique.
Les dégradés coniques sont plus esthétiques lorsqu'ils sont utilisés sur des éléments circulaires ou elliptiques.
Ce qui peut s'obtenir, comme dans ces exemples, avec la propriété border-radius
.
Cet exemple aurait pu être fait plus simplement avec la fonction
repeat-radial-gradient()
Pour des ruptures franches entre les couleurs, celles-ci ont été répétées sur deux positions successives.
L'astuce est de définir une taille du fond (
background-size
)
inférieure à la taille de l'élément, ce qui provoque la répétition.
Animation de la propriété conic-gradient()
.
Les animations ci-dessous ne sont que des exemples parmi une multitude de possibilités d'animation autour des dégradés.
POur la première animation, c'est l'angle de début du dégradé qui a été animé, et pour la deuxième, c'est la position médiane du dégradé.
Le code CSS est assez long car nous avons découpé l'animation en 10 étapes pour un rendu plus fluide.
En effet il semblerait que la transition progressive d'une valeur à l'autre ne soit pas prise en charge avec conic-gradient()
.
Compatibilité et prise en charge par les navigateurs.
conic-gradient()
conic-gradient()
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Baidu Browser
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
KaiOS Browser
Opéra
Opéra Mobile
QQ Browser
Safari
Safari sur IOS
Samsung Internet
Oméra mini
Voir aussi, dans le même module de standardisation que conic-gradient()
.
Les spécifications CSS éditées par le W3C sont organisées en modules. conic-gradient()
fait partie du Module CSS - Images (CSS Images Module). Les définitions suivantes sont également décrites dans ce même module.