Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

CSS - Fonction repeating-radial-gradient()

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

La fonction repeating-radial-gradient() définit un dégradé de couleurs radial avec répétition. Pour que la répétition se déclenche, le dégradé doit être dimensionné à une taille inférieure à celle de l'élément sur lequel on l'applique.

Dégradé sans répétition : la couleur de fin (rose 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 toute la surface de l'élément.

Les dégradés peuvent être substitués à une image dans toutes les propriétés qui attendent une image mais leur utilisation est surtout fréquente avec background-image.

La page présentation générale des dégradés fournit des explications et un tutoriel sur les différentes sortes de dégradés en CSS.

La fonction repeating-radial-gradient() peut être utilisée avec :

Syntaxe de la fonction repeating-radial-gradient().

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

    Ceci est un exemple de syntaxe pour la fonction repeating-radial-gradient(). De nombreuses variantes sont possibles : reportez-vous à la fonction radial-gradient pour les découvrir.

Exemples.

Voici quelques exemples pour stimuler votre créativité.

Motif pseudo-aléatoire

Mélange de trois dégradés radiaux avec répétition

Disque vinyle

Superposition de deux dégradés : un pour le centre (qui n'est pas vraiment un dégradé) et un deuxième pour les sillons.

Disque vinyle avec reflets

Ajout d'un troisième dégradé du type conique pour les reflets de lumière.

Inspiration : Css-Tricks

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.

background-color:
( x y c1 p1 c2 p2 )

Compatibilité et prise en charge suivant les navigateurs.

La plupart des navigateurs traitent correctement les dégradés de couleurs linéaires.

Afficher les versions antérieures   Afficher la version à venir  

Voir aussi...

Arrière-plan - Propriétés.

Arrière-plan - Fonctions.