Effets de style, filtres graphiques

© Christian PAULUS. Document créé le 16 mars 2004 , mis à jour le 29 décembre 2007.

Ce n'est pas le tout d'être une femme du monde. Encore faut-il savoir de quel monde il s'agit. Pierre Dac

Accueil du site > Astuces > CSS > Effets de style, filtres graphiques

Filtres Microsoft / CSS

Les filtres graphiques permettent peut-être d’embellir la mise en page, mais ils sont le plus souvent utilisés pour corriger quelques problèmes d’affichage sur Internet Explorer.

Les filtres sont issus non pas de CSS2, mais d’Internet Explorer (Microsoft). Ils ne fonctionne que sur ce navigateur. De plus, leur utilisation différe à partir de la version 5.5. Ainsi, Explorer 4 comprendra le filtre suivant :

filter:Shadow(color=#000000, direction=75);

mais la ligne suivante, qui donne le même résulat, ne sera comprise que par Explorer 5.5 et ses dérivés :

filter:progid:DXImageTransform.Microsoft.Shadow(color=#000000, direction=75);

Passons aux exemples (le tapis Quesaco est là pour valider les effets de transparence) :

Alpha

Exemples de code et résultats (image carrée 32px x 32px sur tapis Quesaco)

filter:Alpha(opacity=20, finishopacity=0, style=0);
filter:Alpha(opacity=50, finishopacity=0, style=1);
filter:Alpha(opacity=80, finishopacity=0, style=2);
filter:Alpha(opacity=100, finishopacity=0, style=3);

Progid:DXImageTransform.Microsoft.BasicImage

Exemples de code et résultats (image carrée 32px x 32px sur tapis Quesaco)

filter:Progid:DXImageTransform.Microsoft.BasicImage(rotation=1, opacity=1, mirror=0, invert=0, xray=0, grayscale=0);
filter:Progid:DXImageTransform.Microsoft.BasicImage(rotation=2, opacity=0.50, mirror=1, invert=0, xray=1, grayscale=1);

blendTrans

Exemple de code et résultat (image carrée 32px x 32px sur tapis Quesaco)

filter:blendTrans(Duration=0.25, Transition=12);

Résultats (Purement dynamique. Pas d’exemple ici.)

Blur

Exemples de code et résultats (image carrée 32px x 32px sur tapis Quesaco)

filter:Blur(direction=45, strength=40);
filter:Blur(direction=135, strength=80);
filter:Blur(direction=225, strength=40);
filter:Blur(direction=315, strength=0);

Chroma

Exemples de code et résultats (image carrée 32px x 32px sur tapis Quesaco)

filter:Chroma(color=#FFBB99);
filter:Chroma(color=#FF0000);
filter:Chroma(color=#00FF00);
filter:Chroma(color=#0000FF);

DropShadow

Exemples de code et résultats (image carrée 32px x 32px sur tapis Quesaco)

filter:DropShadow(color=#CC0000, offx=3, offy=3);
filter:DropShadow(color=#CCCCCC, offx=6, offy=6);
filter:DropShadow(color=#00CC00, offx=-3, offy=3);
filter:DropShadow(color=#0000CC, offx=-3, offy=-3);

Progid:DXImageTransform.Microsoft.Emboss

Exemple de code et résultat (Relief - image carrée 32px x 32px sur tapis Quesaco)

filter:Progid:DXImageTransform.Microsoft.Emboss();

Progid:DXImageTransform.Microsoft.Engrave

Exemple de code et résultat (Relief - image carrée 32px x 32px sur tapis Quesaco)

filter:Progid:DXImageTransform.Microsoft.Engrave();

FlipH

Exemple de code et résultat (mirroir horizontal - image carrée 32px x 32px sur tapis Quesaco)

filter::FlipH();

FlipV

Exemple de code et résultat (mirroir vertical - image carrée 32px x 32px sur tapis Quesaco)

filter:FlipV();

Glow

Exemples de code et résultats (image carrée 32px x 32px sur tapis Quesaco)

filter:Glow(color=#00CC00, strength=10);
filter:Glow(color=#CC0000, strength=20);
filter:Glow(color=#0000CC, strength=100);
filter:Glow(color=#CCCCCC, strength=200);

Gray

Exemples de code et résultats (nuance de gris - image carrée 32px x 32px sur tapis Quesaco)

filter:Gray();

Invert

Exemples de code et résultats (inversion couleur - image carrée 32px x 32px sur tapis Quesaco)

filter:Invert();

Mask

Exemples de code et résultats (image carrée 32px x 32px sur tapis Quesaco)

filter:Mask(color=#00CC00);
filter:Mask(color=#CC0000);
filter:Mask(color=#0000CC);
filter:Mask(color=#CCCCCC);

revealTrans

Exemple de code :

filter:revealTrans(Duration=1, Transition=12);

Purement dynamique. Pas d’exemple ici.

Shadow

Exemples de code et résultats (image carrée 32px x 32px sur tapis Quesaco)

filter:Shadow(color=#000000, direction=45);
filter:Shadow(color:#00FF00, direction:135);
filter:Shadow(color:#CC0000, direction:225);
filter:Shadow(freq=50, light=100, phase=100, strength=6, add=1);

Wave

Exemples de code et résultats (image carrée 32px x 32px sur tapis Quesaco)

filter:Wave(freq=2, light=20, phase=10, strength=6, add=0);
filter:Wave(freq=8, light=40, phase=50, strength=6, add=0);
filter:Wave(freq=16, light=80, phase=50, strength=80, add=0);
filter:Wave(freq=50, light=100, phase=100, strength=6, add=1);

XRay

Exemples de code et résultats (inversion, négatif - image carrée 32px x 32px sur tapis Quesaco)

filter:XRay();

Plussoyez !

Les forums sont fermés.