mozilla
Vos résultats de recherche

    text-shadow

    Résumé

    La propriété CSS text-shadow accepte une liste d'effets d'ombrage séparés par des virgules qui peuvent être appliqués au texte et aux décorations de texte de l'élément.

    • Valeur initiale none
    • S'applique à *Value 'appliesto-text-shadow' not found in DB*
    • Héritée oui
    • Pourcentages *Value 'percentage-text-shadow' not found in DB*
    • Média visual
    • Valeur calculée *Value 'computed-text-shadow' not found in DB*
    • Animable oui, comme une liste d'ombres
    • Ordre canonique *Value 'order-text-shadow' not found in DB*

    Syntaxe

    text-shadow: none | [<shadow>, ]</shadow>* <shadow> | inherit ;

    <shadow> est définie comme :

    [ <color>? <longueur> <longueur> <longueur>? | <longueur> <longueur> <longueur>? <couleur>? ]

    Valeurs

    <couleur>
    La couleur de l'ombre. Si celle-ci n'est pas spécifiée, en CSS2 la valeur de « color » sera utilisée, et en CSS3 c'est le navigateur qui choisit la couleur à utiliser. La plupart des implémentations utilisent la règle de CSS2.
    <longueur> <longueur>
    Les deux premières longueurs sont les décalages X et Y par rapport au texte. C'est-à-dire que vous pouvez placer l'ombre directement derrière le texte si ces deux valeurs valent 0px.
    <longueur>
    La troisième longueur spécifie le rayon de l'ombre. Plus cette valeur est grande, plus l'ombre est floue, afin que l'ombre devienne plus grande et plus claire. Si cette valeur n'est pas spécifiée, elle vaudra 0px.

    Examples

    text-shadow: orange 0 -2px;
    

    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

    text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em blue;
    color: white;
    font: 1.5em Georgia, "Bitstream Charter", "URW Bookman L", "Century Schoolbook L", serif;

    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

    text-shadow: rgba(0,0,0,0.1) -1px 0, rgba(0,0,0,0.1) 0 -1px,
                 rgba(255,255,255,0.1) 1px 0, rgba(255,255,255,0.1) 0 1px,
                 rgba(0,0,0,0.1) -1px -1px, rgba(255,255,255,0.1) 1px 1px; 
    color: gold;
    background: gold;

    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

    Notes

    Dans la spécification CSS2, la description de cette propriété contredit la syntaxe de données. La spécification CSS3 Text corrige cette ambigüité.

    Spécifications

    Compatibilité des navigateurs

    Navigateur Plus petite version
    Internet Explorer N/A
    Opera 9.5
    Safari 1.1

    Au moment de rédiger cette page :

    • Safari ne gère qu'une ombre. Si une liste séparée par des virgule est fournie, seule la première ombre sera affichée et les autres seront ignorées.
    • Opera 9.5 gère un maximum de 6 ombres et respecte l'ordre de dessin de CSS2 (la première ombre spécifiée est en dessous).
    • Gecko 1.9.1 gère théoriquement une infinité d'ombres (n'essayez pas) et respecte l'ordre de dessin de CSS3 (la première ombre spécifiée est au dessus).

    Voir également

    Text-related properties: letter-spacing, text-align, text-decoration, text-decoration-color, text-decoration-line, text-decoration-style, text-rendering, text-shadow, text-transform, text-indent, white-space, word-spacing

    Étiquettes et contributeurs liés au document

    Étiquettes : 
    Contributors to this page: BenoitL, FredB, BadFox, teoli
    Dernière mise à jour par : teoli,
    Masquer la barre latérale