Ecco alcuni filtri per fogli di stile o CSS da poter utilizzare a proprio comodo nelle proprie pagine web. Alcuni sono più conosciuti e altri meno nell'ambito dello sviluppo di siti internet.
Gli effetti elencati sono i seguenti: Alpha, Blur, Chroma, Drop, Shadow, Mask, Invert, Xray, Glow, Greyscale,FlipH, FlipV e Wave.
Per ognuno di questi è definito un esempio dei tag usati, della sintassi e delle opzioni che è possibile specificare.
Nel dettaglio:
Alpha
Altera l'opacità dell'oggetto, facendolo diventare trasparente sullo sfondo.
| Alpha |
<span style="width:50; height:20; font-size:20px; font-family:verdana; color:#000000; font-weight:bold; filter:alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=0, StartY=0, FinishX=200, FinishY=0)">Alpha</span> |
| |
<img src="image.gif" width="88" height="31" style="filter:alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=0, StartY=0, FinishX=200, FinishY=0)"> |
| opacity |
Livello di opacità. 0 è trasparente, 100 è opaco. |
| finishopacity |
Livello di opacità dall'altra parte dell'ogetto. |
| style |
La forma del gradiente di opacità .0 = uniforme
1 = lineare
2 = radiale
3 =rettangolare |
| startX |
X coordinata per il gradiente di opacità all'inizio. |
| startY |
Y coordinata per il gradiente di opacità all'inizio. |
| finishX |
X coordinata per il gradiente di opacità alla fine. |
| finishY |
Y coordinata per il gradiente di opacità alla fine. |
Blur
Applica un effetto blur definendo forza e direzione. Un interessante mouseover per i link!
| Blur |
<span style="width:50; height:20; font-size:20px; font-family:verdana; color:#000000; font-weight:bold; filter:blur(add=0, direction=200, strength=5)">Blur</span> |
| |
<img src="image.gif" width="88" height="31" style="filter:blur(add=0, direction=200, strength=5)"> |
| add |
True or false. Se true, l'immgagine è aggiunta all'immagine con effetto blur; se false, questo non avviente. |
| direction |
Default value 270 (left).0 = top
45 = top right
90 = right
135 = bottom right
180 = bottom
225 = bottom left
270 = left
315 = top left |
| strength |
Il numero di pixels che estende l'effetto blur. Di default = 5 |
Chroma
Definisce un colore come trasparente. Usato di solito con le immagini e lavora su scrollbars e backgrounds.
Usato anche per fixare la trasparenza su IE6.
| Chroma |
<span style="width:50; height:20; font-size:20px; font-family:verdana; color:#000000; font-weight:bold; filter:chroma(color=#000000)">Chroma</span> |
| |
<img src="image.gif" width="88" height="31" style="filter:chroma(color=#A57B94)"> |
| color |
Il colore che vuoi sia trasparente |
DropShadow
Crea l'ombra di un tuo oggetto specificando l'asse X (orizzontale) e Y (verticale) offset e colori.
| Drop |
<span style="width:50; height:20; font-size:20px; font-family:verdana; color:#000000; font-weight:bold; filter:dropshadow(color=#9BAD71, offx=5, offy=5)">Shadow</span> |
| |
<img src="image.gif" width="88" height="31" style="filter:dropshadow(color=#9BAD71, offx=5, offy=5)"> |
| color |
Il colore in formato #RRGGBB dell'ombra a cascata dropshadow. |
| offX |
La distanza in pixel tra l'ombra a cascata e l'oggetto, lungo l'asse x. Interi positici spostano l'ombra a destra, negativi a sinistra. |
| offY |
La distanza in pixel tra l'ombra a cascata e l'oggetto, lungo l'asse y. Interi positici spostano l'ombra a cascata giù, negativi su. |
| positive |
Se true, tutti i pixel opachi dell'oggetto avranno un ombra. Se false, tutti i pixel trasparenti avranno un ombra a cascata. Il valore di defaut è true. |
FlipH
Crea una immagine riflessa dell'oggetto orizzontalmente.
| FlipH |
<span style="width:50; height:20; font-size:20px; font-family:verdana; color:#000000; font-weight:bold; filter:fliph">FlipH</span> |
| |
<img src="image.gif" width="88" height="31" style="filter:fliph"> |
FlipV
Crea una immagine riflessa dell'oggetto verticalmente.
| FlipV |
<span style="width:50; height:20; font-size:20px; font-family:verdana; color:#000000; font-weight:bold; filter:flipv">FlipV</span> |
| |
<img src="image.gif" width="88" height="31" style="filter:flipv"> |
Glow
Crea un effetto calore intorno all'oggetto. Se esso è una immagine trasparente , il guanto è creato intorno ai suoi pixel opachi.
| Glow |
<span style="width:50; height:20; font-size:20px; font-family:verdana; color:#000000; font-weight:bold; filter:glow(color=#9BAD71, strength=7)">Glow</span> |
| |
<img src="image.gif" width="88" height="31" style="filter:glow(color=#9BAD71, strength=7)"> |
| color |
Il colore che vuoi che sia contornato. |
| strength |
L'intensità del glow (da 1 a 255). |
Grayscale
Converte i colori in scala di grigi.
| Grayscale |
<span style="width:50; height:20; font-size:20px; font-family:verdana; color:#000000; font-weight:bold; filter:gray">Grayscale</span> |
| |
<img src="image.gif" width="88" height="31" style="filter:gray"> |
Invert
Crea un "negativo." dell'oggetto.
| Invert |
<span style="width:50; height:20; font-size:20px; font-family:verdana; color:#CC0000; font-weight:bold; filter:invert">Invert</span> |
| |
<img src="image.gif" width="88" height="31" style="filter:invert"> |
Mask
Trasforma i pixel selezionati di un determinato colore e i pixel trasparenti li rende opachi.
| Mask |
<span style="width:50; height:20; font-size:20px; font-family:verdana; color:#000000; font-weight:bold; filter:mask(color=#000000)">Mask</span> |
| |
<img src="image.gif" width="88" height="31" style="filter:mask(color=#000000)"> |
| color |
Il colore che vogliamo maskeri le aree trasparenti. |
Shadow
Crea un ombra attenuata nella direzione e nei colori specificati.E' un incrocio tra Dropshadow e Glow.
| Shadow |
<span style="width:50; height:20; font-size:20px; font-family:verdana; color:#000000; font-weight:bold; filter:shadow(color=#9BAD71, direction=225)">Shadow</span> |
| |
<img src="image.gif" width="88" height="31" style="filter:shadow(color=#9BAD71, direction=225)"> |
| color |
Il colore al quale applicare l'ombra. |
| direction |
La direzione nella quale vuoi che vada l'ombra, espressa in termini di gradi a partire dalla verticale. Il valore di default è 225 gradi (bottom left).0 = Top
45 = Top right
90 = Right
135 = Bottom right
180 = Bottom
225 = Bottom left
270 = Left
315 = Top left |
Wave
Da una distorsione sinusoidale all'oggetto creando una forma ad onda o wave.
| Wave |
<span style="width:50; height:20; font-size:20px; font-family:verdana; color:#000000; font-weight:bold; filter:wave(add=0, freq=1, lightstrength=20, phase=100, strength=10)">Wave</span> |
| |
<img src="image.gif" width="88" height="31" style="filter:wave(add=0, freq=1, lightstrength=20, phase=100, strength=10)"> |
| add |
A value of 1 adds the original image to the waved image, 0 does not. |
| freq |
The number of waves. |
| light |
The strength of the light on the wave (from 0 to 100). |
| phase |
At what degree the sine wave should start (from 0 to 100). |
| strength |
The intensity of the wave effect. |
Xray
Scala di grigi e appiattimento dei colori .
| XRay |
<span style="width:50; height:20; font-size:20px; font-family:verdana; color:#000000; font-weight:bold; filter:xray">XRay</span> |
| |
<img src="image.gif" width="88" height="31" style="filter:xray"> |
Tags: Coding,
Internet,
Web,
webdesign 
