Accueil    CSS    Propriété filter
 



style css filter  Style CSS filter

«  Partie précédente  |  Index  |  Partie suivante  »


La propriété filter, propre à Internet Explorer et correspondant à des transformations de type DirectX, permet d'appliquer des effets sur les éléments html. Le plus connu est le filtre relatif à l'opacité ("filter:alpha(opacity) = 50") mais il existe également différents effets tels que l'effet d'ombre portée ou le retournement horizontal ou vertical d'un élément.



Propriétés pour le style filter :




Propriété Définition Valeurs CSS
filter Filtres spécifiques à Internet Explorer appliquants des effets sur les éléments html Alpha, BasicImage,
Blur, DropShadow,
Emboss, Engrave,
FlipH ,FlipV,
Glow, Light,
Maskfilter, MotionBlur,
Shadow, Wave
CSS 1


Exemple d'utilisation du style filter :




- Filtre opacité :

<div style="filter:alpha(opacity=30); width:250px; height:60px;
   border:solid 1px black; background-color:steelblue;">
   Filtre pour l'opacité
</div>


- Filtres et Glow Blur :

<div style="filter:blur(add=false, direction=135, strength=6); font-size:18px;" width:300px;>
   Text avec le filtre Blur
</div>
<div style="filter:glow(Color=#ff0000, Strength=8); font-size:18px; width:300px;">
   Text avec le filtre Glow
</div>


- Filtre Xray sur une image :

Image d'origine : <img src="exemples/arobas.png" style="width:48px; height:48px; filter:Engrave;" />
<img src="exemples/arobas.png" style="width:48px; height:48px; filter:Xray;" />


- Filtre FlipV sur une image :

<img src="exemples/arobas.png" style="width:48px; height:48px; filter:FlipV;" />


- Filtre opacité :

Filtre pour l'opacité


- Filtres et Glow Blur :

Texte avec le filtre Blur


Texte avec le filtre Glow




- Filtre Xray sur une image :

Image d'origine :      


- Filtre FlipV sur une image :