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"> |
No Comments su “Alcuni filtri CSS più o meno famosi.”