mozilla
Vos résultats de recherche

    filter

    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.

    Résumé

    La propriété CSS filter permet de réaliser des effets comme un flou, ou une modification de teinte sur le rendu d'un élément avant qu'il soit affiché. Les filtres sont couramment utilisés pour ajuster le rendu d'une image, d'un arrière-plan, ou d'une bordure.

    De nombreuses fonctions incluses dans le standard CSS permettent de réaliser des effets prédéfinis. Il est aussi possible de référer à un filtre défini à l'aide de SVG grâce à une URL visant un élément de filtre SVG.

    Note : les versions anciennes de Internet Explorer (de 4.0 à 9.0) supportaient un "filtre" non standard qui a depuis été déprécié.

    Syntaxe

    Avec une fonction, utilisez la syntaxe suivante :

    filter: <filter-function> [<filter-function>]* | none
    

    Pour faire référence à un élément SVG <filter>, utilisez la syntaxe suivante :

    filter: url(svg-url#element-id) 
    

    Exemples

    Des examples utilisant les fonctions prédéfinies sont présentés ci-dessous. Référez-vous à chacunes des fonctions pour un exemple spécifique.

    .mydiv { filter: grayscale(50%) }
    
    /* griser toutes les images de 50% et les flouter de 10px */
    img {
      filter: grayscale(0.5) blur(10px);
    }

    Des exemples utilisant la fonction URL pour des ressources SVG sont présentés ci-dessous.

    .target { filter: url(#c1); }
    
    .mydiv { filter: url(commonfilters.xml#large-blur) }
    

    Fonctions

    Pour utiliser la propriété CSS filter, vous devez définir une valeur pour les fonctions suivantes. Si la valeur est invalide, la fonction renvoie "none". Sauf indications, les fonctions qui acceptent des valeurs exprimées en pourcentages (comme 34%) acceptent aussi des valeurs exprimées sous forme décimale (comme 0.34), toutefois, la marque décimale acceptée est le point.

    url(ressource)

    La fonction url() accepte la localisation d'un fichier XML qui défini un filtre SVG comme argument. Il est possible d'utiliser une ancre pour spécifier un élement filtre particulier.

    filter: url(resources.svg#c1)
    

    blur(rayon)

    Applique un flou gaussien à l'image d'entrée. La valeur du ‘rayon’ défini la valeur de l'écart-type de la fonction gaussienne, ou le nombre de pixels qui seront mélangés entre eux à l'écran. Plus la valeur est élevée, plus l'effet de flou est marqué. Si aucun paramètre n'est défini, la valeur 0 est alors utilisée. Le paramètre est une <longueur> CSS, mais n'accepte pas les valeurs sous forme de pourcentages.

    filter: blur(5px)
    
    Note : l'exemple SVG affiché ci-dessous suit ce qui est suggéré par le brouillon actuel de la spécification, mais n'est pas identique à l'exemple statique. Au jour d'aujourd'hui (13/06/2012), je ne suis pas sûr si c'est un bogue dans la spécification ou l'exemple statique.
    <svg height="0" xmlns="http://www.w3.org/2000/svg">
      <filter id="svgBlur" x="-5%" y="-5%" width="110%" height="110%">
        <feGaussianBlur in="SourceGraphic" stdDeviation="5"/>
      </filter>
    </svg>
    <svg (none,="" 'xmlns',="" 'http:="" www.w3.org="" 2000="" xmlns="" ')="" 2000="" height="0" http:="" www.w3.org=""> <filter height="110%" id="svgBlur" width="110%" x="-5%" y="-5%"> <fegaussianblur in="SourceGraphic" stddeviation="5"></fegaussianblur> </filter> <filter id="brightnessFilter"> <fecomponenttransfer in="SourceGraphic"> <fefuncb slope="0.5" type="linear"></fefuncb> <fefuncr slope="0.5" type="linear"></fefuncr> <fefuncg slope="0.5" type="linear"></fefuncg> </fecomponenttransfer> </filter> <filter id="contrastFilter"> <fecomponenttransfer> <fefuncr intercept="-1.5" slope="2" type="linear"></fefuncr> <fefuncg intercept="-1.5" slope="2" type="linear"></fefuncg> <fefuncb intercept="-1.5" slope="2" type="linear"></fefuncb> </fecomponenttransfer> </filter> <filter id="dropShadowFilter"> <fegaussianblur in="SourceAlpha" stddeviation="10"></fegaussianblur> <feoffset dx="16" dy="16" result="offsetblur"></feoffset> <feflood flood-color="black"></feflood> <fecomposite in2="offsetblur" operator="in"></fecomposite> <femerge> <femergenode></femergenode> <femergenode in="SourceGraphic"></femergenode> </femerge> </filter> </svg>
    Image d'origine Exemple en direct (rafraîchir peut être nécessaire) Equivalent SVG Exemple statique

    Test_Form_2.jpeg

    Test_Form_2.jpeg

    Test_Form_2.jpeg

    Test_Form_2_s.jpg

    brightness(quantité)

    Applique une transformation linéaire à l'image d'entrée, la rendant plus ou moins lumineuse. Une valeur de 0% créera une image totalement noire. Une valeur de 100% ne changera pas l'image d'origine. Les valeurs dépassant 100% sont acceptées, et donneront une image finale plus lumineuse. Si le paramètre ‘quantité’ est manquant, la valeur 100% est utilisée.

    filter: brightness(0.5)
    Note : l'exemple ci-dessous ne suit pas les suggestions contenues dans le brouillon actuel de la spécification, mais ne correspond pas avec l'exemple statique. Au jour d'aujourd'hui (13/06/2012), je ne suis pas sûr si cela est un bogue dans la spécification ou l'exemple statique/ Une valeur de 1/quantité donne un résultat plus proche de l'image.
    <svg height="0" xmlns="http://www.w3.org/2000/svg">
     <filter id="brightness">
        <feComponentTransfer>
            <feFuncR type="linear" slope="[amount]"/>
            <feFuncG type="linear" slope="[amount]"/>
            <feFuncB type="linear" slope="[amount]"/>
        </feComponentTransfer>
      </filter>
    </svg>
    Image originale Exemple en direct Equivalent SVG Exemple statique
    Test_Form.jpg Test_Form.jpg Test_Form.jpg Test_Form_s.jpg

    contrast(quantité)

    Cette fonction ajuste le contraste de l'entrée. Une valeur de 0% résultera en une image complètement noire. Une valeur de 100% laisse l'entrée inchangée. Les valeurs supérieures à 100% sont acceptées, elles résulteront avec une image ayant moins de contraste. Si le paramètre ‘quantité’ est manquant, une valeur de 100% est utilisée.

    filter: contrast(200%)
    
    Note : l'exemple SVG ci-dessous suit les recommandations du brouillon actuel de la spécification mais ne correspond pas à l'exemple statique. Au jour d'aujourd'hui (13/06/2012), je ne suis pas sûr s'il s'agit d'un bogue dans la spécification ou dans l'exemple statique.
    <svg height="0" xmlns="http://www.w3.org/2000/svg">
      <filter id="contrast">
        <feComponentTransfer>
          <feFuncR type="linear" slope="[amount]" intercept="-(0.5 * [amount] + 0.5)"/>
          <feFuncG type="linear" slope="[amount]" intercept="-(0.5 * [amount] + 0.5)"/>
          <feFuncB type="linear" slope="[amount]" intercept="-(0.5 * [amount] + 0.5)"/>
        </feComponentTransfer>
      </filter>
    </svg>
    
    Image d'origine Exemple en direct Equivalent SVG Exemple statique

    Test_Form_3.jpeg

    Test_Form_3.jpeg

    Test_Form_3.jpeg

    Test_Form_3_s.jpg

    drop-shadow(<shadow>)

    Applique une ombre portée à l'image d'entrée. En réalité, une ombre portée est une version décalée et floutée du masque alpha de l'image d'entrée dessiné dans une couleur particulière, et recomposée sous l'image d'origine. La fonction accepte un paramètre de type <shadow> (défini dans CSS3 Backgrounds), à l'exception du mot-clé ‘inset’ qui n'est pas admis. Cette fonction est similaire à la propriété plus connue box-shadow ; la différence réside dans le fait qu'avec les filtres, certains navigateurs utilisent une accelération matérielle qui donne de meilleures performances. Les paramètres de la propriété <shadow> sont les suivants :

    <offset-x> <offset-y> (nécessaire)
    Ce sont deux valeurs de <longueur> qui définissent le décalage de l'ombre portée. <offset-x> définie la distance horizontale. Les valeurs négatives placent l'ombre à gauche de l'élément. <offset-y> définie la distance verticale. Les valeurs négatives placent l'ombre au-dessus de l'élément. Référez-vous à <longueur> pour les unités acceptées.
    Si les deux valeurs sont 0, l'ombre est placée exactement derrière l'élément (et peut créer un effet de flou si <blur-radius> ou <spread-radius> est utilisé).
    <blur-radius> (optionnel)
    C'est une troisième valeur de <longueur>. Plus cette valeur est grande, plus le flou est marqué, l'ombre devenant ainsi moins tranchée. Les valeurs négatives ne sont pas acceptées. Si cette valeur n'est pas définie, elle vaudra 0 par défaut (le bord de l'ombre est net).
    <spread-radius> (optionnel)
    C'est une quatrième valeur de <longueur>. Les valeurs positives vont agrandir l'étendue de l'ombre, alors que les valeurs négatives vont réduire l'étendue de l'ombre. Si cette valeur n'est pas spécifiée, la valeur par défaut est 0 (l'ombre est de la même taille que l'élément).
    <color> (optionnel)
    Référez-vous à l'article <color> pour les mots-clés et les notations acceptés.
    Si la valeur n'est pas spécifiée, la couleur dépend du navigateur. Dans Gecko (Firefox), Presto (Opera) et Trident (Internet Explorer), la valeur de la propriété color est utilisée. WebKit de son côté considère l'ombre transparente et est donc inutile si la valeur de <color> est omise.
    filter: drop-shadow(16px 16px 10px black)
    <svg height="0" xmlns="http://www.w3.org/2000/svg">
     <filter id="drop-shadow">
        <feGaussianBlur in="SourceAlpha" stdDeviation="[radius]"/>
        <feOffset dx="[offset-x]" dy="[offset-y]" result="offsetblur"/>
        <feFlood flood-color="[color]"/>
        <feComposite in2="offsetblur" operator="in"/>
        <feMerge>
          <feMergeNode/>
          <feMergeNode in="SourceGraphic"/>
        </feMerge>
      </filter>
    </svg>
    
    Image d'origine Exemple en direct (rafraîchir peut être nécessaire) Exemple SVG Exemple statique

    Test_Form_4.jpeg

    Test_Form_4.jpeg

    Test_Form_4.jpeg

    Test_Form_4_s.jpg

    grayscale(quantité)

    Converti une image en niveaux de gris. La valeur de ‘quantité’ définie la proportion de la conversion. Une valeur de 100% est une valeur en niveaux de gris. Une valeur de 0% laisse la donnée d'entrée inchangée. Les valeurs entre 0% et 100% sont une transition linéaire entre ces deux états. Si le paramètre ‘quantité’ est manquant, une valeur de 100% est utilisée.

    filter: grayscale(100%)
    Image d'origine Exemple en direct Exemple statique

    Test_Form_5.jpeg

    Test_Form_5.jpeg

    Test_Form_5_s.jpg

    hue-rotate(angle)

    Applique une rotation de teinte à l'image. La valeur de ‘angle’ définie le nombre de degrés sur la roue des couleurs dont l'image sera ajustée. Une valeur de 0deg laisse la donnée d'entrée inchangée. Si le paramètre ‘angle’ est manquant, une valeur de 0deg est utilisée. La valeur maximale est 360deg.

    filter: hue-rotate(90deg)
    Image d'origine Exemple en direct Exemple statique

    Test_Form_6.jpeg

    Test_Form_6.jpeg

    Test_Form_6_s.jpg

    invert(quantité)

    A pour effet d'inverser l'image d'entrée. La valeur de ‘quantité’ définie la proportion de la conversion. Une valeur de 100% inverse complètement l'image. Une valeur de 0% laisse l'image inchangée. Les valeurs entre 0% et 100% sont un facteur linéaire entre les deux états. Si le paramètre ‘quantité’ est manquant, une valeur de 100% est utilisée.

    filter: invert(100%)
    Image d'origine Exemple en direct Exemple statique

    Test_Form_7.jpeg

    Test_Form_7.jpeg

    Test_Form_7_s.jpg

    opacity(quantité)

    Applique la transparence à l'image d'entrée. La valeur de ‘quantité’ définie la proposition de la conversion. Une valeur de 0% est complètement transparente. Une valeur de 100% laisse l'image inchangée. Les valeurs entre 0% et 100% suivent une règle linéaire. Ceci est l'équivalent de multiplier l'image par une certaine quantité. Si le paramètre ‘quantité’ est manquant, la valeur 100% est utilisée. Cette fonction est similaire à la propriété plus connue opacity ; la différence est que pour les filtres, certains navigateurs activent l'accélération matérielle qui donne de meilleures performances.

    filter: opacity(50%)
    Image d'origine Exemple en direct Exemple statique

    Test_Form_14.jpeg

    Test_Form_14.jpeg

    Test_Form_14_s.jpg

    saturate(quantité)

    Modifie la saturation de l'image d'entrée. La valeur de ‘quantité’ définie la proportion de la conversion. Une valeur de 0% résulte en une image complètement désaturée. Une valeur de 100% laisse l'image inchangée. L'effet des valeurs entre 0% et 100% varie selon un facteur linéaire. Les valeurs supérieures à 100% sont acceptées, résultant en des images très saturées. Si le paramètre ‘quantité’ est manquant, la valeur utilisée est 100%.

    Note : Chrome v19 implémente le standard sans le symbole pourcentage (%) - l'exemple en direct ci-dessous apparaît comme si  'filter: saturate(3)' était utilisé. Ce bogue a été corrigé dans Chrome v20.

    filter: saturate(3%)
    Image d'origine Exemple en direct Exemple statique

    Test_Form_9.jpeg

    Test_Form_9.jpeg

    Test_Form_9_s.jpg

    sepia(quantité)

    Convertit l'image en sépia. La valeur de ‘quantité’ définie la proportion de la conversion. Une valeur de 100% transforme complètement l'image en sépia. Une valeur de 0% laisse l'image inchangée. Les valeurs entre 0% et 100% suivent une règle linéaire. Si le paramètre ‘quantité’ est manquant, la valeur de 100% est utilisée.

    filter: sepia(100%)
    Image d'origine Exemple en direct Exemple statique

    Test_Form_12.jpeg

    Test_Form_12.jpeg

    Test_Form_12_s.jpg

    Combinaisons de fonctions

    Il est possible de combiner autant de fonctions que vous souhaitez pour manipuler le rendu. L'exemple suivant améliore le contraste et la luminosité de l'image.

    filter: contrast(175%) brightness(3%)
    Image d'origine Exemple en direct Exemple statique

    Test_Form_8.jpeg

    Test_Form_8.jpeg

    Test_Form_8_s.jpg

    Spécifications

    Spécification Statut Commentaire
    Filter Effects 1.0
    La définition de 'filter' dans cette spécification.
    Working Draft Définition initiale.

    Compatibilité des navigateurs

    Fonction Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
    Support de base 18.0-webkit ? (voir la note) Pas de support (voir la note) ? (Oui)-webkit
    Fonction Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
    Support de base ? ? ? ?

    ?

    Notes concernant Gecko

    Gecko implémente actuellement la forme url(resource) de la propriété filter.

    Notes concernant Internet Explorer

    Internet Explorer 4.0 à 9.0 implémente une propriété filter non standard. La syntaxe, complètement différente de celle-ci, n’est pas documentée ici.

    See also

    Étiquettes et contributeurs liés au document

    Étiquettes : 
    Contributors to this page: FredB, flexbox, thenew, teoli, emersion, wakka27
    Dernière mise à jour par : emersion,