Vos résultats de recherche

    Utilisation_de_dégradés Redirection 1

    Gecko 1.9.2, utilisé par Firefox 3.6, intègre la gestion des dégradés dans la propriété CSS background. L'utilisation de dégradés CSS dans un fond permet d'afficher des transitions douces entre deux couleurs ou plus. En évitant d'utiliser des images pour ces effets, le temps de téléchargement et la bande passante utilisée sont réduits. En outre, comme le dégradé est généré par le navigateur, les objets concernés se comporteront mieux en cas de zoom et votre mise en page peut être ajustée de manière plus flexible.

    Gecko gère deux types de dégradés : linéaire (-moz-linear-gradient) et radial (-moz-radial-gradient).

    Dégradés linéaires

    Pour créer un dégradé linéaire, définissez un point de départ et une direction (sous la forme d'un angle) selon laquelle l'effet de dégradé sera appliqué. Vous pouvez également définir des arrêts de couleurs. Ceux-ci représentent les couleurs entre lesquelles Gecko doit rendre des transitions douces, et deux au moins doivent être spécifiés, mais vous pouvez en indiquer plus pour obtenir des effets plus complexes.

    Dégradés linéaires simples

    Voici un dégradé linéaire qui commence au centre (horizontalement) et en haut (verticalement), du bleu vers le blanc.

    Capture d'écran Démonstration en direct
     
    background: -moz-linear-gradient(top, blue, white);
    

    Voici le même dégradé, modifié pour s'effectuer de gauche à droite :

    Capture d'écran Démonstration en direct
    basic_linear_blueleft.png  
    background: -moz-linear-gradient(left, blue, white);
    

    Le dégradé peut se faire en diagonale en spécifiant à la fois des positions de départ horizontale et verticale. Par exemple :

    Capture d'écran Démonstration en direct
    basic_linear_bluetopleft.png  
    background: -moz-linear-gradient(left top, blue, white);
    

    Utilisation d'angles

    Si aucun angle n'est spécifié, il sera déterminé automatiquement à partir de la position de départ. Si vous désirez un meilleur contrôle sur la direction du dégradé, vous pouvez définir cet angle précisément.

    Par exemple, voici deux dégradés avec le même point de départ « left center », mais où le second a également un angle de 20 degrés.

    linear_gradient_angle.png

    La règle CSS pour le dégradé de droite est :

    background: -moz-linear-gradient(left 20deg, black, white);
    

    L'angle est spécifié entre une ligne horizontale et la ligne de dégradé, dans le sens inverse des aiguilles d'une montre. Autrement dit, 0deg génère un dégradé horizontal vers la droite, tandis que 90deg crée un gradient vertical de bas en haut :

    linear_redangles.png

    background: -moz-linear-gradient(<angle>, red, white);
    

    Arrêts de couleurs

    Les arrêts de couleurs sont des points sur la ligne de dégradé qui doivent avoir une couleur précise. Leur emplacement peut être spécifié sous la forme d'un pourcentage de la longueur de la ligne, ou d'une longueur absolue. Vous pouvez en spécifier autant que vous voulez pour obtenir l'effet désiré.

    Si vous spécifiez un pourcentage, 0% indique le point de départ, et 100% le point d'arrivée ; il est cependant possible d'utiliser des valeurs en dehors de cet intervalle si nécessaire pour obtenir l'effet désiré.

    Exemple : trois arrêts de couleurs

    Cet exemple spécifie trois arrêts de couleurs :

    Capture d'écran Démonstration en direct
    linear_colorstops1.png  
    background: -moz-linear-gradient(top, blue, white 80%, orange);
    

    Notez que la première et la dernière couleur n'indiquent pas d'emplacement ; en conséquence les valeurs 0% et 100% sont assignées automatiquement. La couleur centrale indique un emplacement à 80%, ce qui la place proche du bas.

    Exemple : arrêts de couleurs disposés régulièrement

    Voici un exemple utilisant une grande variété de couleurs, disposées à intervalles réguliers :

    Capture d'écran Démonstration en direct
    linear_rainbow.png  
    background: -moz-linear-gradient(left, red, orange, yellow, green, blue);
    

    Remarquez que les arrêts de couleurs sont disposés automatiquement à intervalles réguliers lorsqu'aucun emplacement n'est spécifié.

    Transparence et dégradés

    Les gradients gèrent la transparence. Vous pouvez l'utiliser, par exemple, en superposant plusieurs fonds pour créer des effets sur les images. Par exemple :

    linear_multibg_transparent.png

    background: -moz-linear-gradient(right, rgba(255,255,255,0), rgba(255,255,255,1)), url(http://foo.com/image.jpg);
    

    Les fonds sont superposés avec le premier fond spécifié au dessus, et chaque fond supplémentaire par dessous. En superposant les fonds de cette manière, il est possible de créer de effets très intéressants visuellement, comme celui ci-dessus.

    Dégradés radiaux

    Les dégradés radiaux sont spécifiés à l'aide de la propriété -moz-radial-gradient. La syntaxe est semblable à celle des dégradés linéaires, avec en plus la forme du dégradé (un cercle ou une ellipse) ainsi que sa taille.

    Arrêts de couleurs

    Les arrêts de couleurs sont indiqués de la même façon que pour les dégradés linéaires. La ligne de dégradé s'étend de la position de départ dans toutes les directions.

    Exemple : arrêts de couleurs disposés régulièrement

    Par défaut, comme avec les dégradés linéaires, les arrêts de couleurs sont disposés régulièrement :

    Capture d'écran Démonstration en direct
    radial_gradient_even.png  
    background: -moz-radial-gradient(red, yellow, rgb(30, 144, 255));
    

    Exemple :  arrêts de couleurs placés explicitement

    Ici, nous spécifierons des emplacement spécifiques pour les arrêts de couleurs :

    Capture d'écran Démonstration en direct
    radial_gradient_varied.png  
    background: -moz-radial-gradient(red 5%, yellow 25%, #1E90FF 50%);
    

    Taille

    C'est l'un des domaines où les dégradés radiaux diffèrent des dégradés linéaires. Vous pouvez fournir une valeur de taille qui spécifie le point définissant la taille du cercle ou de l'ellipse. Consultez cette description des constantes de taille  pour plus de détails.

    Exemple : côté le plus proche pour une ellipse

    Cette ellipse utiliser la valeur de taille closest-side, ce qui veut dire que la taille est définie par la distance depuis le point de départ (le centre) jusqu'au côté le plus proche de la boîte qui l'entoure.

    Capture d'écran Démonstration en direct
    radial_ellipse_size1.png  
    background: -moz-radial-gradient(ellipse closest-side, red, yellow 10%, #1E90FF 50%, white);
    

    Exemple : côté le plus éloigné pour une ellipse

    Cet exemple est similaire au précédent, sauf que sa taille est spécifiée comme farthest-corner, ce qui définit la taille du dégradé par la distance du point de départ au coin le plus éloigné de la boîte qui l'entoure.

    Capture d'écran Démonstration en direct
    radial_ellipse_size2.png  
    background: -moz-radial-gradient(ellipse farthest-corner, red, yellow 10%, #1E90FF 50%, white);
    

    Exemple : côté le plus proche pour un cercle

    Cet exemple utilise closest-side, qui détermine le rayon du cercle comme la distance entre le point de départ (le centre) et le côté le plus proche.

    Capture d'écran Démonstration en direct
    radial_circle_size1.png  
    background: -moz-radial-gradient(circle closest-side, red, yellow 10%, #1E90FF 50%, white);
    

    Ici, le rayon du cercle est la moitié de la hauteur de la boîte, puisque les bords haut et bas sont équidistants du point de départ et plus proches que les bords gauche et droit.

    Répétition de dégradés

    Les valeurs -moz-linear-gradient et -moz-radial-gradient ne permettent pas automatiquement de répéter les arrêts de couleurs. Cependant, les valeurs -moz-repeating-linear-gradient et -moz-repeating-radial-gradient permettent de disposer de cette fonctionnalité.

    Exemple : répétition d'un dégradé linéaire

    Cet exemple utilise -moz-repeating-linear-gradient pour créer un dégradé :

    Capture d'écran Démonstration en direct
    repeating_linear_gradient.png  
    background: -moz-repeating-linear-gradient(top left -45deg, red, red 5px, white 5px, white 10px);
    

    Exemple : répétition d'un dégradé radial

    Cet exemple utilise -moz-repeating-radial-gradient pour créer un dégradé :

    Capture d'écran Démonstration en direct
    repeating_radial_gradient.png  
    background: -moz-repeating-radial-gradient(black, black 5px, white 5px, white 10px);
    

    Voir également

    Étiquettes et contributeurs liés au document

    Contributeurs ayant participé à cette page : FredB
    Dernière mise à jour par : FredB,