Repeating-radial-gradient() - Fonction CSS
Résumé des caractéristiques de la 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 sur les dégradés de couleurs fournit des explications et un tutoriel sur les différentes sortes de dégradés en CSS.
La valeur repeating-radial-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-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 fonctionradial-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
Simulateur avec la fonction repeating-radial-gradient()
Compatibilité et prise en charge suivant les navigateurs.
Tous les navigateurs actuels traitent correctement les dégradés linéaires ou radials, de même que les dégradés répétitifs.
La fonction repeating-radial-gradient() peut donc être utilisée sans crainte.
repeating-radial-gradient() pour définir un dégradé de couleurs répétitif et radial.radiaux
repeating-radial-gradient()Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Internet Explorer
QQ Browser
Safari sur IOS
Firefox pour Androïd
Opéra Mobile
Baidu Browser
KaiOS Browser
UC Browser pour Androïd
Samsung Internet
Chrome
Edge
Androïd Brower
Chrome pour Androïd
Opéra
Safari
Firefox
Opéra mini
Historique de la fonction repeating-radial-gradient().
repeating-radial-gradient() pour définir un dégradé de couleurs répétitif et radial.-
Module CSS - Image niveau 3
Première description des dégradés radials. Et description des fonctionsradial-gradient()etrepeating-radial-gradient().
23 Juillet 2009Document de travail.
17 Avril 2012Candidat à la recommandation.
-
Module CSS - Images et contenu remplacé
Possibilité de spécifier l'espace de couleurs dans lequel les interpolations de couleurs doivent se calculer.11 Septembre 2012Document de travail.
Voir aussi : autres manipulations d'images.
Les dégradés de couleurs sont décrits dans la spécification du W3C relative aux images (CSS Images Module). Voici d'autres termes décrit dans cette même norme :