mozilla
Vos résultats de recherche

    -moz-radial-gradient

    Cet article est en cours de rédaction. Si vous désirez le continuer, n'hésitez pas à l'éditer.

    La fonction CSS radial-gradient() crée une <image> qui représente un dégradé circulaire de couleurs, rayonnant depuis une origine. À la différence d'un gradiant linéaire, où les couleurs apparaissent d'un côté du dégradé, les couleurs naissent d'un point unique et se propagent vers l'extérieur, soit en cercle, soit en ellipse. Le résultat de cette fonction est un object CSS de type <gradient>.

    IMAGE

    De part sa nature, le dégradé circulaire se déclare par son centre, sa taille et sa forme sur les bords. Les couleurs de fin sont déclarées comme une liste, de la même manière que linear-gradient(). En démarrant du centre et en progressant vers (et potentiellement au-delà) la forme finale, des ellipses sont dessinées et colorées selon les différentes couleur d'arrêt.

    Comme n'importe quel dégradé, un dégradé circulaire n'est pas une <color> CSS, mais une image sans dimensions intrinsèques, c'est-à-dire qu'elle n'a pas de taille naturelle ou préférée, ni de proportions préférées. Sa taille réelle s'adapte à celle de l'élément auquel il est appliqué.

    La fonction radial-gradient ne permet pas les dégradés répétitifs. Pour une telle fonctionnalité, utilisez la fonction CSS repeating-radial-gradient.

    Cette fonction est expérimentale
    Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.
    Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

    Syntaxe

    radial-gradient( [<position> || <angle>,]? [<shape> || <size>,]? <stop>, <stop>[, <stop>]* )
    

    Valeurs

    <position>
    Une position, interprétée de la même manière que background-position ou transform-origin. Si elle est omise, la valeur par défaut est center.
    <angle>
    Un angle qui établit la ligne de dégradé, qui s'étend du point de départ avec cet angle. La valeur par défaut est 0deg.
    <shape>
    La forme du dégradé. La valeur est soit circle (ce qui signifie que le dégradé est un cercle) ou ellipse (ce qui signifie que la forme est une ellipse dont l'axe principal coïncide avec la ligne de dégradé). La valeur par défaut est ellipse.
    <size>
    La taille du dégradé. C'est une des constantes de dimensions listées ci-dessous.
    <stop>
    Cette valeur est composée d'une valeur de <color>, suivie d'une position intermédiaire optionnelle (soit un pourcentage entre 0% et 100% ou une <longueur> le long de la ligne de dégradé.
    Le rendu des positions intermédiaires pour les dégradés CSS suit les même règles que les dégradés SVG.

    Constantes de dimensions

    Constantes Description
    closest-side La forme du dégradé fait qu'il touche le côté le plus proche de son centre (pour les cercles) ou touche les côtés les plus proches sur les axes verticaux et horizontaux (pour les ellipses).
    closest-corner La forme du dégradé est telle qu'il touche le coin le plus proche de son centre.
    farthest-side Similaire à closest-side, sauf que la forme est telle qu'il touche le côté ou les côtés les plus éloignés de son centre.
    farthest-corner La forme du dégradé est telle qu'il touche le coin le plus éloigné de son centre.
    contain Un synonyme de closest-side.
    cover Un synonyme de farthest-corner.

    Usage

    Les dégradés radiaux se propagent le long d'un axe. À chaque point de l'axe, un rayon est spécifié. Cela peut être imaginé comme créer deux « cercles », où pour chacun des cercles le centre est spécifié par le point et le rayon par le rayon défini. Le dégradé se forme vers l'extérieur depuis la circonférence du cercle intérieur jusque vers le cercle extérieur.

    background-image:    -moz-radial-gradient(center 45deg, circle closest-side, orange 0%, red 100%);
    background-image: -webkit-radial-gradient(center 45deg, circle closest-side, orange 0%, red 100%);
    background-image: -ms-radial-gradient(center 45deg, circle closest-side, orange 0%, red 100%);
    background-image: -o-radial-gradient(center 45deg, circle closest-side, orange 0%, red 100%);
    

    Exemples

    Pour une présentation plus générale des dégradés CSS dans Gecko/Firefox, voir -moz-linear-gradient.

    background:    -moz-radial-gradient(45px 45px 45deg, circle cover,
    				 aqua 0%, rgba(0, 0, 255, 0) 100%, blue 95%);
    background: -webkit-radial-gradient(45px 45px 45deg, circle cover,
         aqua 0%, rgba(0, 0, 255, 0) 100%, blue 95%);
    background: -ms-radial-gradient(45px 45px 45deg, circle cover,
         aqua 0%, rgba(0, 0, 255, 0) 100%, blue 95%);
    background: -o-radial-gradient(45px 45px 45deg, circle cover,
         aqua 0%, rgba(0, 0, 255, 0) 100%, blue 95%);
    
    background-image: -webkit-radial-gradient(45px 45px, ellipse farthest-corner,
    				 aqua 0%, rgba(0, 0, 255, 0) 100%, blue 95%);
    background-image: -moz-radial-gradient(45px 45px, ellipse farthest-corner,
    				 aqua 0%, rgba(0, 0, 255, 0) 100%, blue 95%);
    background-image:    -ms-radial-gradient(45px 45px, ellipse farthest-corner,
    				 aqua 0%, rgba(0, 0, 255, 0) 100%, blue 95%);
    background-image:    -o-radial-gradient(45px 45px, ellipse farthest-corner,
    				 aqua 0%, rgba(0, 0, 255, 0) 100%, blue 95%);
    
    Radial
    background: -webkit-radial-gradient(45px 45px, cover, rgb(255, 0, 0) 0%, rgb(0, 0, 255) 100%);
    background:    -moz-radial-gradient(45px 45px, cover, rgb(255, 0, 0) 0%, rgb(0, 0, 255) 100%);
    background:    -ms-radial-gradient(45px 45px, cover, rgb(255, 0, 0) 0%, rgb(0, 0, 255) 100%);
    background:    -o-radial-gradient(45px 45px, cover, rgb(255, 0, 0) 0%, rgb(0, 0, 255) 100%);
    

    Spécifications

    Spécification Statut Commentaire
    CSS Image Values and Replaced Content Module Level 3
    La définition de 'radial-gradients()' dans cette spécification.
    Candidate Recommendation  

    Compatibilité des navigateurs

    Fonction Firefox (Gecko) Chrome Internet Explorer Opera Safari
    Support de base 3.6 (1.9.2)-moz bug 479220 10.0 (r75891)-webkit 10.0 11.60 -o

    6.0 -webkit
    Note : à la différence de Gecko, WebKit supporte mes dégradés avec des dimensions explicites. Voir bug 752187

    Héritage de la syntaxe webkit Pas de support 3 -webkit Pas de support Pas de support 4.0 -webkit[2]
    Note : la syntaxe de la proposition de Mozilla varie fortement par rapport à la proposition initial de WebKit :
    • Gecko (Firefox) utilise des propriétés différentes afin de différencier les dégradés radiaux et linéaires, alors que WebKit les a auparavant rassemblé dans une unique propriété qui nécessite un paramètre en tête pour différencier le dégradé.
    • La syntaxe réelle d'un dégradé radial est fortement différente dans la spécification.
    • Webkit, Mozilla, Opera et Microsoft implémentent désormais la syntaxe correspondant à la précédente version du standard du W3C. Cette syntaxe a été modifiée en octobre 2011. La nouvelle syntaxe n'est supportée par aucun navigateur.

    Voir également

    Étiquettes et contributeurs liés au document

    Contributors to this page: teoli
    Dernière mise à jour par : teoli,