filter

  • Raccourci de la révision : CSS/filter
  • Titre de la révision : filter
  • ID de la révision : 355007
  • Créé :
  • Créateur : FredB
  • Version actuelle ? Non
  • Commentaire

Contenu de la révision

{{ CSSRef() }}

{{ SeeCompatTable() }}

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é.
  • {{ Xref_cssinitial() }} none
  • S'applique à éléments contenant et graphiques
  • {{ Xref_cssinherited() }} non
  • Média {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }} comme spécifiée
  • {{ Xref_cssanimatable() }} oui

Syntaxe

Avec une fonction, utilisez la syntaxe suivante :

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

Pour faire référence à un élément SVG {{ SVGElement("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 ‘raryon’ 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, pour 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 {{Xref_csslength()}} CSS, mais n'accepte pas les valeur 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 height="0" xmlns="http://www.w3.org/2000/svg"> <filter height="110%" id="svgBlur" width="110%" x="-5%" y="-5%"> <fegaussianblur in="SourceGraphic" stddeviation="5"/> </filter> <filter id="brightnessFilter"> <fecomponenttransfer in="SourceGraphic"> <fefuncb slope="0.5" type="linear"/> <fefuncr slope="0.5" type="linear"/> <fefuncg slope="0.5" type="linear"/> </fecomponenttransfer> </filter> <filter id="contrastFilter"> <fecomponenttransfer> <fefuncr intercept="-1.5" slope="2" type="linear"/> <fefuncg intercept="-1.5" slope="2" type="linear"/> <fefuncb intercept="-1.5" slope="2" type="linear"/> </fecomponenttransfer> </filter> <filter id="dropShadowFilter"> <fegaussianblur in="SourceAlpha" stddeviation="10"/> <feoffset dx="16" dy="16" result="offsetblur"/> <feflood flood-color="black"/> <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) 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'entre, la rendant plus ou moins lumineuse. Une valeur de 0% crééra 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 {{cssxref('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 {{ Xref_csslength() }} 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 à {{ Xref_csslength() }} 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 {{ Xref_csslength() }}. Plus cette valeur est grande, plus le flou est marqué, l'ombre devenant ainsi moins tranchées. 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 {{ Xref_csslength() }}. Les valeurs positives vont agrandir l'étendue 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 {{ Xref_csscolorvalue() }} 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 proprété {{ cssxref("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éfini 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 maramè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éfini 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'enré 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éfini 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éfini 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 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 {{Cssxref('opacity')}} ; la différence est que pour les filtres, certains navigateurs actives l'accelération matérielle qui donne de meilleurs 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é)

Modification la saturation de l'image d'entrée. La valeur de ‘quantité’ la proportion de la conversion. Une valeur de 0% est 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% varient 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éfini la proportion de la conversion. Une valeur de 100% transforme complètement l'image en sépai. 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 État Commentaire
{{ SpecName('Filters 1.0', '#FilterProperty', 'filter') }} {{ Spec2('Filters 1.0') }} Définition initiale.

Compatibilité des navigateurs

{{ CompatibilityTable() }}

Fonction Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Support de base 18.0{{ property_prefix("-webkit") }} {{ CompatUnknown() }} (voir la note) {{ CompatNo() }} (voir la note) {{ CompatUnknown() }} {{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}
Fonction Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support de base {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

{{ CompatUnknown() }}

Notes concernant Gecko

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

Notes concernant Internet Explorer

Internet Explorer 4.0 to 9.0 implemented a non-standard filter property. The syntax was completely different from this one and is not documented here.

See also

Source de la révision

<p>{{ CSSRef() }}</p>
<p>{{ SeeCompatTable() }}</p>
<h2 id="R.C3.A9sum.C3.A9">Résumé</h2>
<p>La propriété <a href="/fr/docs/CSS" title="/fr/docs/CSS">CSS</a> <code>filter</code> 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.</p>
<p>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 <a href="/fr/docs/SVG/Element/filter" title="/fr/docs/SVG/Element/filter">élément de filtre SVG</a>.</p>
<div class="note">
  <strong>Note :</strong> les versions anciennes de Internet Explorer (de 4.0 à 9.0) supportaient un <a class="external" href="http://msdn.microsoft.com/en-us/library/ms532853(v=vs.85).aspx" title="http://msdn.microsoft.com/en-us/library/ms532853(v=vs.85).aspx">"filtre"</a> non standard qui a depuis été déprécié.</div>
<ul class="cssprop">
  <li><dfn>{{ Xref_cssinitial() }} </dfn> <code>none</code></li>
  <li><dfn>S'applique à </dfn>éléments contenant et graphiques</li>
  <li><dfn>{{ Xref_cssinherited() }} </dfn> non</li>
  <li><dfn>Média </dfn> {{ Xref_cssvisual() }}</li>
  <li><dfn>{{ Xref_csscomputed() }} </dfn> comme spécifiée</li>
  <li><dfn>{{ Xref_cssanimatable() }} </dfn>oui</li>
</ul>
<h2 id="Syntaxe">Syntaxe</h2>
<p>Avec une fonction, utilisez la syntaxe suivante :</p>
<pre>
filter: &lt;filter-function&gt; [&lt;filter-function&gt;]* | none
</pre>
<p>Pour faire référence à un élément SVG {{ SVGElement("filter") }}, utilisez la syntaxe suivante :</p>
<pre class="eval">
filter: url(svg-url#element-id) 
</pre>
<h2 id="Exemples">Exemples</h2>
<p>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.</p>
<pre>
.mydiv { filter: grayscale(50%) }

/* griser toutes les images de 50% et les flouter de 10px */
img {
&nbsp; filter: grayscale(0.5) blur(10px);
}</pre>
<p>Des exemples utilisant la fonction URL pour des ressources SVG sont présentés ci-dessous.</p>
<pre>
.target { filter: url(#c1); }

.mydiv { filter: url(commonfilters.xml#large-blur) }
</pre>
<h2 id="Fonctions">Fonctions</h2>
<p>Pour utiliser la propriété CSS <code>filter</code>, 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.</p>
<h3 id="url(ressource)">url(ressource)</h3>
<p>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.</p>
<pre>
filter: url(resources.svg#c1)
</pre>
<h3 id="blur(rayon)">blur(rayon)</h3>
<p>Applique un flou gaussien à l'image d'entrée. La valeur du ‘raryon’ 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, pour 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 {{Xref_csslength()}} CSS, mais n'accepte pas les valeur sous forme de pourcentages.</p>
<pre>
filter: blur(5px)
</pre>
<div class="note">
  <strong>Note :</strong> l'exemple SVG affiché ci-dessous suit ce qui est suggéré par le <a class="external" href="http://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.html#blurEquivalent" title="http://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.html#blurEquivalent">brouillon actuel de la spécification</a>, 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.</div>
<pre>
&lt;svg height="0" xmlns="http://www.w3.org/2000/svg"&gt;
  &lt;filter id="svgBlur" x="-5%" y="-5%" width="110%" height="110%"&gt;
    &lt;feGaussianBlur in="SourceGraphic" stdDeviation="5"/&gt;
  &lt;/filter&gt;
&lt;/svg&gt;</pre>
<p>&lt;svg height="0" xmlns="<a class="external" href="http://www.w3.org/2000/svg" rel="freelink">http://www.w3.org/2000/svg</a>"&gt; &lt;filter height="110%" id="svgBlur" width="110%" x="-5%" y="-5%"&gt; &lt;fegaussianblur in="SourceGraphic" stddeviation="5"/&gt; &lt;/filter&gt; &lt;filter id="brightnessFilter"&gt; &lt;fecomponenttransfer in="SourceGraphic"&gt; &lt;fefuncb slope="0.5" type="linear"/&gt; &lt;fefuncr slope="0.5" type="linear"/&gt; &lt;fefuncg slope="0.5" type="linear"/&gt; &lt;/fecomponenttransfer&gt; &lt;/filter&gt; &lt;filter id="contrastFilter"&gt; &lt;fecomponenttransfer&gt; &lt;fefuncr intercept="-1.5" slope="2" type="linear"/&gt; &lt;fefuncg intercept="-1.5" slope="2" type="linear"/&gt; &lt;fefuncb intercept="-1.5" slope="2" type="linear"/&gt; &lt;/fecomponenttransfer&gt; &lt;/filter&gt; &lt;filter id="dropShadowFilter"&gt; &lt;fegaussianblur in="SourceAlpha" stddeviation="10"/&gt; &lt;feoffset dx="16" dy="16" result="offsetblur"/&gt; &lt;feflood flood-color="black"/&gt; &lt;fecomposite in2="offsetblur" operator="in"/&gt; &lt;femerge&gt; &lt;femergenode/&gt; &lt;femergenode in="SourceGraphic"/&gt; &lt;/femerge&gt; &lt;/filter&gt; &lt;/svg&gt;</p>
<table border="0" cellpadding="1" cellspacing="1" style="table-layout: fixed; width: 85%;">
  <thead>
    <tr>
      <th align="left" scope="col">Image d'origine</th>
      <th align="left" scope="col">Exemple en direct (rafraîchir peut être nécessaire)</th>
      <th align="left" scope="col">Equivalent SVG</th>
      <th align="left" scope="col">Exemple statique</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <p><img alt="Test_Form_2.jpeg" class="internal default" src="/@api/deki/files/6252/=Test_Form_2.jpeg" style="width: 100%;" /></p>
      </td>
      <td style="width: 100%;-moz-filter:blur(5px); -webkit-filter:blur(5px); -o-filter:blur(5px); -ms-filter:blur(5px);">
        <p><img alt="Test_Form_2.jpeg" class="internal default" src="/@api/deki/files/6252/=Test_Form_2.jpeg" /></p>
      </td>
      <td>
        <p><img alt="Test_Form_2.jpeg" class="internal default" src="/@api/deki/files/6252/=Test_Form_2.jpeg" /></p>
      </td>
      <td style="width: 100%;">
        <p><img alt="Test_Form_2_s.jpg" class="internal default" src="/@api/deki/files/6254/=Test_Form_2_s.jpg" /></p>
      </td>
    </tr>
  </tbody>
</table>
<h3 id="brightness(quantit.C3.A9)">brightness(quantité)</h3>
<p>Applique une transformation linéaire à l'image d'entre, la rendant plus ou moins lumineuse. Une valeur de 0% crééra une image totalement noire. Une valeur de 100% ne changera pas l'image d'origine. Les valeurs dépassant 100%&nbsp; sont acceptées, et donneront une image finale plus lumineuse. Si le paramètre ‘quantité’ est manquant, la valeur 100% est utilisée.</p>
<pre>
filter: brightness(0.5)</pre>
<div class="note">
  <strong>Note :</strong> l'exemple ci-dessous <strong>ne suit pas</strong> les suggestions contenues dans le <a class="external" href="http://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.html#brightnessEquivalent" title="http://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.html#brightnessEquivalent">brouillon actuel de la spécification</a>, 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 <code>1/quantité</code> donne un résultat plus proche de l'image.</div>
<pre>
&lt;svg height="0" xmlns="http://www.w3.org/2000/svg"&gt;
 &lt;filter id="brightness"&gt;
    &lt;feComponentTransfer&gt;
        &lt;feFuncR type="linear" slope="[amount]"/&gt;
        &lt;feFuncG type="linear" slope="[amount]"/&gt;
        &lt;feFuncB type="linear" slope="[amount]"/&gt;
    &lt;/feComponentTransfer&gt;
  &lt;/filter&gt;
&lt;/svg&gt;</pre>
<table border="0" cellpadding="1" cellspacing="1" style="table-layout: fixed; width: 85%;">
  <thead>
    <tr>
      <th align="left" scope="col">Image originale</th>
      <th align="left" scope="col">Exemple en direct</th>
      <th align="left" scope="col">Equivalent SVG</th>
      <th align="left" scope="col">Exemple statique</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><img alt="Test_Form.jpg" class="internal default" src="/@api/deki/files/6248/=Test_Form.jpg" style="width: 100%;" /></td>
      <td style="-moz-filter:brightness(.5); -webkit-filter:brightness(.5); -o-filter:brightness(.5); -ms-filter:brightness(.5);"><img alt="Test_Form.jpg" class="internal default" src="/@api/deki/files/6248/=Test_Form.jpg" style="width: 100%;" /></td>
      <td><img alt="Test_Form.jpg" class="internal default" src="/@api/deki/files/6248/=Test_Form.jpg" style="width: 100%;" /></td>
      <td><img alt="Test_Form_s.jpg" class="internal default" src="/@api/deki/files/6251/=Test_Form_s.jpg" style="width: 100%;" /></td>
    </tr>
  </tbody>
</table>
<h3 id="contrast(quantit.C3.A9)">contrast(quantité)</h3>
<p>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.</p>
<pre>
filter: contrast(200%)
</pre>
<div class="note">
  <strong>Note :</strong> l'exemple SVG ci-dessous suit les recommandations du <a class="external" href="http://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.html#contrastEquivalent" title="http://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.html#contrastEquivalent">brouillon actuel de la spécification</a> 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.</div>
<pre>
&lt;svg height="0" xmlns="http://www.w3.org/2000/svg"&gt;
  &lt;filter id="contrast"&gt;
    &lt;feComponentTransfer&gt;
      &lt;feFuncR type="linear" slope="[amount]" intercept="-(0.5 * [amount] + 0.5)"/&gt;
      &lt;feFuncG type="linear" slope="[amount]" intercept="-(0.5 * [amount] + 0.5)"/&gt;
      &lt;feFuncB type="linear" slope="[amount]" intercept="-(0.5 * [amount] + 0.5)"/&gt;
    &lt;/feComponentTransfer&gt;
  &lt;/filter&gt;
&lt;/svg&gt;
</pre>
<table border="0" cellpadding="1" cellspacing="1" style="table-layout: fixed; width: 85%;">
  <thead>
    <tr>
      <th align="left" scope="col">Image d'origine</th>
      <th align="left" scope="col">Exemple en direct</th>
      <th align="left" scope="col">Equivalent SVG</th>
      <th align="left" scope="col">Exemple statique</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <p><img alt="Test_Form_3.jpeg" class="internal default" src="/@api/deki/files/6255/=Test_Form_3.jpeg" style="width:100%;" /></p>
      </td>
      <td style="-moz-filter:contrast(200%); -webkit-filter:contrast(200%); -o-filter:contrast(200%); -ms-filter:contrast(200%);">
        <p><img alt="Test_Form_3.jpeg" class="internal default" src="/@api/deki/files/6255/=Test_Form_3.jpeg" style="width:100%;" /></p>
      </td>
      <td>
        <p><img alt="Test_Form_3.jpeg" class="internal default" src="/@api/deki/files/6255/=Test_Form_3.jpeg" style="width:100%;" /></p>
      </td>
      <td>
        <p><img alt="Test_Form_3_s.jpg" class="internal default" src="/@api/deki/files/6256/=Test_Form_3_s.jpg" style="width:100%;" /></p>
      </td>
    </tr>
  </tbody>
</table>
<h3 id="drop-shadow(&lt;shadow&gt;)">drop-shadow(&lt;shadow&gt;)</h3>
<p>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 &lt;shadow&gt; (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 {{cssxref('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é &lt;shadow&gt; sont les suivants :</p>
<dl>
  <dt>
    &lt;offset-x&gt; &lt;offset-y&gt; <small>(nécessaire)</small></dt>
  <dd>
    Ce sont deux valeurs de {{ Xref_csslength() }} qui définissent le décalage de l'ombre portée. <code>&lt;offset-x&gt;</code> définie la distance horizontale. Les valeurs négatives placent l'ombre à gauche de l'élément. <code>&lt;offset-y&gt;</code> définie la distance verticale. Les valeurs négatives placent l'ombre au-dessus de l'élément. Référez-vous à {{ Xref_csslength() }} pour les unités acceptées.<br />
    Si les deux valeurs sont <code>0</code>, l'ombre est placée exactement derrière l'élément (et peut créer un effet de flou si <code>&lt;blur-radius&gt;</code> ou <code>&lt;spread-radius&gt;</code> est utilisé).</dd>
  <dt>
    &lt;blur-radius&gt; <small>(optionnel)</small></dt>
  <dd>
    C'est une troisième valeur de {{ Xref_csslength() }}. Plus cette valeur est grande, plus le flou est marqué, l'ombre devenant ainsi moins tranchées. Les valeurs négatives ne sont pas acceptées. Si cette valeur n'est pas définie, elle vaudra <code>0</code> par défaut (le bord de l'ombre est net).</dd>
  <dt>
    &lt;spread-radius&gt; <small>(optionnel)</small></dt>
  <dd>
    C'est une quatrième valeur de {{ Xref_csslength() }}. Les valeurs positives vont agrandir l'étendue 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 <code>0</code> (l'ombre est de la même taille que l'élément).</dd>
  <dt>
    &lt;color&gt; <small>(optionnel)</small></dt>
  <dd>
    Référez-vous à l'article {{ Xref_csscolorvalue() }} pour les mots-clés et les notations acceptés.<br />
    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 proprété {{ cssxref("color") }} est utilisée. WebKit de son côté considère l'ombre transparente et est donc inutile si la valeur de <code>&lt;color&gt;</code> est omise.</dd>
</dl>
<pre>
filter: drop-shadow(16px 16px 10px black)</pre>
<pre>
&lt;svg height="0" xmlns="http://www.w3.org/2000/svg"&gt;
 &lt;filter id="drop-shadow"&gt;
    &lt;feGaussianBlur in="SourceAlpha" stdDeviation="[radius]"/&gt;
    &lt;feOffset dx="[offset-x]" dy="[offset-y]" result="offsetblur"/&gt;
    &lt;feFlood flood-color="[color]"/&gt;
    &lt;feComposite in2="offsetblur" operator="in"/&gt;
    &lt;feMerge&gt;
      &lt;feMergeNode/&gt;
      &lt;feMergeNode in="SourceGraphic"/&gt;
    &lt;/feMerge&gt;
  &lt;/filter&gt;
&lt;/svg&gt;
</pre>
<table border="0" cellpadding="1" cellspacing="1" style="table-layout: fixed; width: 85%;">
  <thead>
    <tr>
      <th align="left" scope="col">Image d'origine</th>
      <th align="left" scope="col">Exemple en direct (rafraîchir peut être nécessaire)</th>
      <th align="left" scope="col">Exemple SVG</th>
      <th align="left" scope="col">Exemple statique</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <p><img alt="Test_Form_4.jpeg" class="internal default" src="/@api/deki/files/6257/=Test_Form_4.jpeg" /></p>
      </td>
      <td style="-moz-filter:drop-shadow(16px 16px 20px black); -webkit-filter:drop-shadow(16px 16px 20px black); -o-filter:drop-shadow(16px 16px 20px black); -ms-filter:drop-shadow(16px 16px 20px black);">
        <p><img alt="Test_Form_4.jpeg" class="internal default" src="/@api/deki/files/6257/=Test_Form_4.jpeg" /></p>
      </td>
      <td>
        <p><img alt="Test_Form_4.jpeg" class="internal default" src="/@api/deki/files/6257/=Test_Form_4.jpeg" /></p>
      </td>
      <td>
        <p><img alt="Test_Form_4_s.jpg" class="internal default" src="/@api/deki/files/6258/=Test_Form_4_s.jpg" /></p>
      </td>
    </tr>
  </tbody>
</table>
<h3 id="grayscale(quantit.C3.A9)">grayscale(quantité)</h3>
<p>Converti une image en niveaux de gris. La valeur de ‘quantité’ défini 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 maramètre ‘quantité’ est manquant, une valeur de 100% est utilisée.</p>
<pre>
filter: grayscale(100%)</pre>
<table border="0" cellpadding="1" cellspacing="1" style="table-layout: fixed; width: 85%;">
  <thead>
    <tr>
      <th align="left" scope="col">Image d'origine</th>
      <th align="left" scope="col">Exemple en direct</th>
      <th align="left" scope="col">Exemple statique</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <p><img alt="Test_Form_5.jpeg" class="internal default" src="/@api/deki/files/6259/=Test_Form_5.jpeg" /></p>
      </td>
      <td style="-moz-filter:grayscale(100%); -webkit-filter:grayscale(100%); -o-filter:grayscale(100%); -ms-filter:grayscale(100%);">
        <p><img alt="Test_Form_5.jpeg" class="internal default" src="/@api/deki/files/6259/=Test_Form_5.jpeg" /></p>
      </td>
      <td>
        <p><img alt="Test_Form_5_s.jpg" class="internal default" src="/@api/deki/files/6260/=Test_Form_5_s.jpg" /></p>
      </td>
    </tr>
  </tbody>
</table>
<h3 id="hue-rotate(angle)">hue-rotate(angle)</h3>
<p>Applique une rotation de teinte à l'image. La valeur de ‘<code class="property">angle</code>’ défini 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'enré inchangée. Si le paramètre ‘<code class="property">angle</code>’ est manquant, une valeur de 0deg est utilisée. La valeur maximale est 360deg.</p>
<pre>
filter: hue-rotate(90deg)</pre>
<table border="0" cellpadding="1" cellspacing="1" style="table-layout: fixed; width: 85%;">
  <thead>
    <tr>
      <th align="left" scope="col">Image d'origine</th>
      <th align="left" scope="col">Exemple en direct</th>
      <th align="left" scope="col">Exemple statique</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <p><img alt="Test_Form_6.jpeg" class="internal default" src="/@api/deki/files/6262/=Test_Form_6.jpeg" /></p>
      </td>
      <td style="-moz-filter:hue-rotate(90deg); -webkit-filter:hue-rotate(90deg); -o-filter:hue-rotate(90deg); -ms-filter:hue-rotate(90deg);">
        <p><img alt="Test_Form_6.jpeg" class="internal default" src="/@api/deki/files/6262/=Test_Form_6.jpeg" /></p>
      </td>
      <td>
        <p><img alt="Test_Form_6_s.jpg" class="internal default" src="/@api/deki/files/6263/=Test_Form_6_s.jpg" /></p>
      </td>
    </tr>
  </tbody>
</table>
<h3 id="invert(quantit.C3.A9)">invert(quantité)</h3>
<p>A pour effet d'inverser l'image d'entrée. La valeur de ‘<code class="property">quantité</code>’ défini 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 ‘<code class="property">quantité</code>’ est manquant, une valeur de 100% est utilisée.</p>
<pre>
filter: invert(100%)</pre>
<table border="0" cellpadding="1" cellspacing="1" style="table-layout: fixed; width: 85%;">
  <thead>
    <tr>
      <th align="left" scope="col">Image d'origine</th>
      <th align="left" scope="col">Exemple en direct</th>
      <th align="left" scope="col">Exemple statique</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <p><img alt="Test_Form_7.jpeg" class="internal default" src="/@api/deki/files/6264/=Test_Form_7.jpeg" /></p>
      </td>
      <td style="-moz-filter:invert(100%); -webkit-filter:invert(100%); -o-filter:invert(100%); -ms-filter:invert(100%);">
        <p><img alt="Test_Form_7.jpeg" class="internal default" src="/@api/deki/files/6264/=Test_Form_7.jpeg" /></p>
      </td>
      <td>
        <p><img alt="Test_Form_7_s.jpg" class="internal default" src="/@api/deki/files/6265/=Test_Form_7_s.jpg" /></p>
      </td>
    </tr>
  </tbody>
</table>
<h3 id="opacity(quantit.C3.A9)">opacity(quantité)</h3>
<p>Applique la transparence à l'image d'entrée. La valeur de ‘<code class="property">quantité</code>’ défini 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 de multiplier l'image par une certaine quantité. Si le paramètre ‘<code class="property">quantité</code>’ est manquant, la valeur 100% est utilisée. Cette fonction est similaire à la propriété plus connue {{Cssxref('opacity')}} ; la différence est que pour les filtres, certains navigateurs actives l'accelération matérielle qui donne de meilleurs performances.</p>
<pre>
filter: opacity(50%)</pre>
<table border="0" cellpadding="1" cellspacing="1" style="table-layout: fixed; width: 85%;">
  <thead>
    <tr>
      <th align="left" scope="col">Image d'origine</th>
      <th align="left" scope="col">Exemple en direct</th>
      <th align="left" scope="col">Exemple statique</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <p><img alt="Test_Form_14.jpeg" class="internal default" src="/@api/deki/files/6270/=Test_Form_14.jpeg" /></p>
      </td>
      <td style="-moz-filter:opacity(50%); -webkit-filter:opacity(50%); -o-filter:opacity(50%); -ms-filter:opacity(50%);">
        <p><img alt="Test_Form_14.jpeg" class="internal default" src="/@api/deki/files/6270/=Test_Form_14.jpeg" /></p>
      </td>
      <td>
        <p><img alt="Test_Form_14_s.jpg" class="internal default" src="/@api/deki/files/6271/=Test_Form_14_s.jpg" /></p>
      </td>
    </tr>
  </tbody>
</table>
<h3 id="saturate(quantit.C3.A9)">saturate(quantité)</h3>
<p>Modification la saturation de l'image d'entrée. La valeur de ‘<code class="property">quantité</code>’ la proportion de la conversion. Une valeur de 0% est 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% varient 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 ‘<code class="property">quantité</code>’ est manquant, la valeur utilisée est 100%.</p>
<div class="note">
  <p><strong>Note</strong> : Chrome v19 implémente le standard sans le symbole pourcentage (%) - l'exemple en direct ci-dessous apparaît comme si&nbsp; '<code>filter: saturate(3)'</code> était utilisé. Ce bogue a été corrigé dans Chrome v20.</p>
</div>
<pre>
filter: saturate(3%)</pre>
<table border="0" cellpadding="1" cellspacing="1" style="table-layout: fixed; width: 85%;">
  <thead>
    <tr>
      <th align="left" scope="col">Image d'origine</th>
      <th align="left" scope="col">Exemple en direct</th>
      <th align="left" scope="col">Exemple statique</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <p><img alt="Test_Form_9.jpeg" class="internal default" src="/@api/deki/files/6266/=Test_Form_9.jpeg" /></p>
      </td>
      <td style="-moz-filter:saturate(3); -webkit-filter:saturate(3); -o-filter:saturate(3); -ms-filter:saturate(3);">
        <p><img alt="Test_Form_9.jpeg" class="internal default" src="/@api/deki/files/6266/=Test_Form_9.jpeg" /></p>
      </td>
      <td>
        <p><img alt="Test_Form_9_s.jpg" class="internal default" src="/@api/deki/files/6269/=Test_Form_9_s.jpg" /></p>
      </td>
    </tr>
  </tbody>
</table>
<h3 id="sepia(quantit.C3.A9)">sepia(quantité)</h3>
<p>Convertit l'image en sépia. La valeur de ‘<code class="property">quantité</code>’ défini la proportion de la conversion. Une valeur de 100% transforme complètement l'image en sépai. 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 ‘<code class="property">quantité</code>’ est manquant, la valeur de 100% est utilisée.</p>
<pre>
filter: sepia(100%)</pre>
<table border="0" cellpadding="1" cellspacing="1" style="table-layout: fixed; width: 85%;">
  <thead>
    <tr>
      <th align="left" scope="col">Image d'origine</th>
      <th align="left" scope="col">Exemple en direct</th>
      <th align="left" scope="col">Exemple statique</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <p><img alt="Test_Form_12.jpeg" class="internal default" src="/@api/deki/files/6272/=Test_Form_12.jpeg" /></p>
      </td>
      <td style="-moz-filter:sepia(100%); -webkit-filter:sepia(100%); -o-filter:sepia(100%); -ms-filter:sepia(100%);">
        <p><img alt="Test_Form_12.jpeg" class="internal default" src="/@api/deki/files/6272/=Test_Form_12.jpeg" /></p>
      </td>
      <td>
        <p><img alt="Test_Form_12_s.jpg" class="internal default" src="/@api/deki/files/6273/=Test_Form_12_s.jpg" /></p>
      </td>
    </tr>
  </tbody>
</table>
<h2 id="Combinaisons_de_fonctions">Combinaisons de fonctions</h2>
<p>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.</p>
<pre>
filter: contrast(175%) brightness(3%)</pre>
<table border="0" cellpadding="1" cellspacing="1" style="table-layout: fixed; width: 85%;">
  <thead>
    <tr>
      <th align="left" scope="col">Image d'origine</th>
      <th align="left" scope="col">Exemple en direct</th>
      <th align="left" scope="col">Exemple statique</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <p><img alt="Test_Form_8.jpeg" class="internal default" src="/@api/deki/files/6274/=Test_Form_8.jpeg" /></p>
      </td>
      <td style="-moz-filter:contrast(175%) brightness(3%); -webkit-filter:contrast(175%) brightness(3%); -o-filter:contrast(175%) brightness(3%); -ms-filter:contrast(175%) brightness(3%);">
        <p><img alt="Test_Form_8.jpeg" class="internal default" src="/@api/deki/files/6274/=Test_Form_8.jpeg" /></p>
      </td>
      <td>
        <p><img alt="Test_Form_8_s.jpg" class="internal default" src="/@api/deki/files/6275/=Test_Form_8_s.jpg" /></p>
      </td>
    </tr>
  </tbody>
</table>
<h2 id="Sp.C3.A9cifications">Spécifications</h2>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">Spécification</th>
      <th scope="col">État</th>
      <th scope="col">Commentaire</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{ SpecName('Filters 1.0', '#FilterProperty', 'filter') }}</td>
      <td>{{ Spec2('Filters 1.0') }}</td>
      <td>Définition initiale.</td>
    </tr>
  </tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité des navigateurs</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Fonction</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari (WebKit)</th>
      </tr>
      <tr>
        <td>Support de base</td>
        <td>18.0{{ property_prefix("-webkit") }}</td>
        <td>{{ CompatUnknown() }} (voir la <a href="/en/CSS/filter#Gecko_notes" title="en/CSS/filter#Gecko_notes">note</a>)</td>
        <td>{{ CompatNo() }} (voir la <a href="/en/CSS/filter#Internet_explorer_notes" title="en/CSS/filter#Internet_explorer_notes">note</a>)</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Fonction</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Mobile</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Support de base</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>
          <p>{{ CompatUnknown() }}</p>
        </td>
      </tr>
    </tbody>
  </table>
</div>
<h3 id="Notes_concernant_Gecko">Notes concernant Gecko</h3>
<p>Gecko implémente actuellement la forme <code>{{ anch("url(resource)") }}</code> de la propriété<code> filter</code>.</p>
<h3 id="Notes_concernant_Internet_Explorer">Notes concernant Internet Explorer</h3>
<p>Internet Explorer 4.0 to 9.0 implemented a non-standard <code>filter</code> property. The syntax was completely different from this one and is not documented here.</p>
<h2 id="See_also">See also</h2>
<ul>
  <li><a class="internal" href="/en-US/docs/Applying_SVG_effects_to_HTML_content" title="En/Applying SVG effects to HTML content">Applying SVG effects to HTML content</a></li>
  <li>The {{ Cssxref("mask") }} property</li>
  <li><a class="internal" href="/en-US/docs/SVG" title="En/SVG">SVG</a></li>
  <li><a class="external" href="http://www.html5rocks.com/en/tutorials/filters/understanding-css/" title="http://www.html5rocks.com/en/tutorials/filters/understanding-css/">Understanding CSS filters</a>, HTML5Rocks! article</li>
  <li><a class="external" href="http://techstream.org/Web-Design/CSS3-Image-Filters" title="CSS filters">CSS filters</a> Tech Stream article</li>
</ul>
Revenir à cette révision