Repeating-conic-gradient() - Fonction CSS

repeating-conic-gradient()

Résumé des caractéristiques de la fonction repeating-conic-gradient()

Description rapide
Définit un dégradé de couleurs conique, et le répète sur toute la surface de l'élément.
Statut
Standard
Pourcentages
Calculés par rapport à la longueur de la ligne de dégradé.
Module W3C
Module CSS - Images
Références (W3C)
Statut du document: WD (document de travail)

Description de la fonction repeating-conic-gradient().

La fonction repeating-conic-gradient() définit un dégradé de couleurs conique avec répétition. Pour que la répétition se déclenche, le dégradé doit être dimensionné sur moins de un tour (360 degrés).

Dégradé sans répétition : la couleur finale (bleu ciel sur cet exemple) est utilisée pour compléter le remplissage.

Dégradé avec répétition : le motif du dégradé est répété sur les 360 degrés d'un tour complet.

Reportez-vous à la page sur les dégradés de couleurs pour une présentation générale des trois types de dégradés : linéaire, radial et conique.

La valeur repeating-conic-gradient() peut être utilisée avec les propriétés suivantes :

  • background-image : Définit l'image ou dégradé d'arrière-plan (plusieurs images ou dégradés peuvent coexister).
  • border-image-source : Définit l'image utilisée pour construire la bordure.
  • image-set() : Propose au navigateur un choix d'images afin que ce dernier puisse choisir celle qui est le plus adapté (résolution, format...).
  • list-style-image : Définit une image personnalisée à utiliser à la place des puces, dans le contexte d'une énumération sous forme de liste.
  • mask-image : Désigne l'image ou le fichier SVG qui sera utilisé comme masque.

Syntaxes de la fonction repeating-conic-gradient().

  • background: repeating-conic-gradient(blue 0%, pink 10%, blue 20%); c1 p1 c2 p2 c3 p3

    Ceci est un exemple de syntaxe pour la fonction repeating-conic-gradient().

    Les différentes syntaxes sont identiques à celles de la fonction conic-gradient().

Exemples d'utilisation de la fonction repeating-conic-gradient().

Un bouton en aluminium

Ce bouton n'est pas une image mais la combinaison de deux dégradés.

Un maillage en osier

Enfin, en tout cas, quelque chose qui suggère l'osier.

Exemple avec la fonction repeating-radial-gradient() - Mélange aléatoire Exemple avec la fonction repeating-radial-gradient() - Disque vinyle Exemple avec la fonction repeating-radial-gradient() - Disque vinyle et reflets

Simulateur avec la fonction repeating-conic-gradient()

background-image :

Support de la fonction repeating-conic-gradient().

Tous les navigateurs actuels traitent correctement les dégradés coniques, les dégradés répétitifs et la fonction repeating-conic-gradient().

Colonne 1
Capacité des navigateurs à générer des dégradés coniques.
Colonne 2
Support de la fonction repeating-conic-gradient pour définir un dégradé conique.
1
Dégradés
coniques
2
Fonction
repeating-conic-gradient()
Estimation de la prise en charge globale.
96%
94%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

Baidu Browser

QQ Browser

Opéra Mobile

Firefox

Chrome

Safari

Edge

Opéra

Chrome pour Androïd

Safari sur IOS

Samsung Internet

UC Browser pour Androïd

Androïd Brower

Firefox pour Androïd

KaiOS Browser

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.
Caniuse
Caniuse

Historique de la fonction repeating-conic-gradient().

Voir aussi : manipulations d'images.

La fonction repeating-conic-gradient() est décrite dans la spécification "module CSS - Images" (CSS Images Module).
Les définitions suivantes sont également décrites dans ce même module.

Propriétés :

image-orientation
Définit l'orientation d'une image (doit-elle être tournée de 90° ?)
image-rendering
Définit le mode de mise à l'échelle des images.
object-fit
Définit comment un contenu multimédia (image, vidéo) doit s'adapter aux dimensions de son contenant.
object-position
Définit la position d'une image ou d'une vidéo par rapport à son container.

Fonctions :

conic-gradient()
Définit un dégradé de couleurs conique.
⚠
cross-fade()
Réalise le mélange de plusieurs images.
element()
Récupère l'aspect d'un élément sous forme d'une image.
⚠
image()
Désigne une image en précisant, le cas échéant, son sens de lecture.
image-set()
Propose au navigateur un choix d'images afin que ce dernier puisse choisir celle qui est le plus adapté (résolution, format...).
linear-gradient()
Détermine un dégradé de couleur évoluant de façon linéaire d'un bout à l'autre de l'élément.
radial-gradient()
Détermine un dégradé de couleur radial (depuis le centre vers les bords).
repeating-linear-gradient()
Détermine un dégradé de couleur linéaire et le répète sur toute la surface de l'élément.
repeating-radial-gradient()
Détermine un dégradé de couleur radial et le répète sur toute la surface de l'élément.
⚠
stripes()
Définit une image en bande de couleurs.