Effets de style, filtres graphiques

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();