H O M E Free Web Upgrade
CSS FILTER

La lista dei Filter applicabili a immagini e testi, i Filter sono pienamente compatibili con il browser MSIE, ed è possibile concatenare più Filter.

L'unica proprietà dei Filter applicabile ai Browser Mozilla, Firefox e Netscape è l'opacità OPACITY.

Negli esempi sono applicati altri argomenti per la proprietà dei Filter, vedi es: ALPHA.

Per applicare solo l'effetto opacità (opacity) a una immagine:
<img src="immagine.jpg" style="Filter:Alpha(Opacity=50)"> i valori inseribili vanno da 0 a 100, se viene impostato un valore 100 a un Opacity, l'effetto verrà praticamente annullato se non sono inseriti altri argomenti, vedi ALPHA.

Per i browser Mozilla, Firefox e Netscape la proprietà Opacity si scrive cosi:
-moz-opacity:.50;opacity:.50;
-moz-opacity:0.5;opacity:0.5;

Valori da 0 a 1 - 0, 0.1, 0.5, 0.9, 1 - 0 L'immagine non verrà visualizzata, 0.5 = 50% di opacità, 1 = Nessuna opacità.

<img src="immagine.jpg" style="Filter:Alpha(Opacity=50); -moz-opacity:.50;opacity:.50">

<img src="immagine.jpg" style="Filter:Alpha(Opacity=50); -moz-opacity:0.5;opacity:0.5">






Save the Children Italia Onlus


ALPHA

ALPHA



<img src="immagine.jpg" style="Filter:Alpha(Opacity=100, FinishOpacity=0, Style=2, StartX=20, StartY=40, FinishX=0, FinishY=0)">




<span style="width: 200;height:50;font-size:36pt;font-family:Arial Black;color:red;Filter:Alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=0, StartY=0, FinishX=580, FinishY=0)">ALPHA</span>
BLUR

BLUR



<img src="immagine.jpg" style="Filter:Blur(Add = 0, Direction = 225, Strength = 6)">





<span style="width:200;height:50;font-size:36pt;font-family:Arial Black;color:red;Filter:Blur(Add = 1, Direction = 225, Strength = 12)">BLUR</span>
CROMA

CROMA

<img src="immagine.gif" style="Filter:Chroma(Color = #FF0000)">


<span style="width:200;height:50;font-size:36pt;font-family:Arial Black;color:red;Filter: Chroma(Color = #FF0000)">CROMA</span>
DROPSHADOW

D.SHAD.

<img src="immagine.gif" style="Filter:DropShadow(Color=#FF0000, OffX=2, OffY=2, Positive=1)">

<span style="width:200;height:50;font-size:30pt;font-family:Arial Black;color:blue;Filter: DropShadow(Color=#FF0000, OffX=2, OffY=2, Positive=1)">DropShadow</span>
FLIP

FLIP



<img src="immagine.jpg" style="Filter:FlipV">





<span style="width:200;height:50;font-size:36pt;font-family:Arial Black;color:red;Filter:FlipV">FLIP</span>
GLOW

GLOW

<img src="immagine.gif" style="Filter:Glow(Color=#00FF00, Strength=20)">

<span style="width:200; height:50;font-size:26pt;font-family:Arial Black;color:red;Filter: Glow(Color=#00FF00, Strength=10)">GLOW</span>
GRAY

GRAY


<img src="immagine.jpg" style="Filter:Gray">






<span style="width:200;height:50;font-size:32pt;font-family:Arial Black;color:red; Filter:Gray">GRAY</span>
INVERT

INVERT



<img src="immagine.jpg" style="Filter:Invert">




<span style="width:200;height:50;font-size:28pt;font-family:Arial Black;color:red;Filter: Invert">INVERT</span>
MASK

MASK

<img src="immagine.gif" style="Filter:Mask(Color=#00FF00)">

<span style="width:204;height:50;font-size:28pt;font-family:Arial Black;color red;Filter: Mask(Color=#00FF00)">MASK</span>
SHADOW

SHADOW

<img src="immagine.gif" style="Filter:Shadow(Color=#0000FF, Direction=225)">

<span style="width:200;height:50;font-size:28pt;font-family:Arial Black;color:red;Filter: Shadow(Color=#0000FF, Direction=225)">SHADOW</span>
WAVE

WAVE



<img src="immagine.jpg" style="Filter:Wave(Add=0, Freq=3, LightStrength=20, Phase=220, Strength=10)">




<span style="width:200;height:50;font-size:36pt;font-family:Arial Black;color:red;Filter:Wave(Add=0, Freq=3, LightStrength=20, Phase=20, Strength=4)">WAVE</span>
XRAY

XRAY



<img src="immagine.jpg" style="Filter:Xray">





<span style="width:200;height:50;font-size:36pt;font-family:Arial Black;color:red;Filter: Xray">XRAY</span>
FILTRI CONCATENATI


<img src="immagine.jpg" style="Filter:Alpha(Opacity=100, FinishOpacity=0, Style=2, StartX=20, StartY=40, FinishX=0, FinishY=0) Wave(Add=0, Freq=5, LightStrength=20, Phase=220, Strength=10)">

ESEMPIO
<span style="width:200;height:30;font-size:28pt;font-family:Arial Black;Filter:Mask(color=#FF0000) Shadow(Color=#0000FF, Direction=225) Chroma(color=#FF0000)"> ESEMPIO</span>
<img src="immagine.jpg" style="Filter:Alpha(Opacity=100, FinishOpacity=0, Style=2, StartX=20, StartY=40, FinishX=0, FinishY=0) Blur(Add = 5, Direction = 135, Strength = 18)">
<img src="immagine.jpg" style="filter:Wave(Add=0, Freq=3, LightStrength=20, Phase=220, Strength=10) Alpha(Opacity=100, FinishOpacity=0, Style=2, StartX=20, StartY=40, FinishX=0, FinishY=0)">
  | © by Giari Massimo | 2000 - |