I filtri in Internet Explorer 6 permettono di ottenere degli effetti grafici di notevole impatto sulle immagini, come la regolazione del livello di trasparenza, la simulazione del movimento sfocato, la capacità di riflettere orizzontalmente o verticalmente l'immagine (proprio come accade nei programmi di fotoritocco) e altro ancora.
Di seguito ci occuperemo dei filtri statici disponibili da Internet Explorer 4 e superiori, la cui sintassi è:
elemento {
filter:nomefiltro(proprietà=valore, proprietà=valore...);
}
La spaziatura indicata deve essere rispettata.
I filtri
La seguente tabella riassume alcuni dei filtri disponibili.
| Nome | Descrizione | Proprietà |
|---|---|---|
alpha() |
trasparenza | opacity (da 0 a 100)finishopacity (da 0 a 100)style (forma gradiente da 0 a 3)startX (intero di coordinata)startY (intero di coordinata)finishX (intero di coordinata)finishY (intero di coordinata) |
blur() |
movimento sfocato | add (1 o 0)direction (0, 45, 90, 135, 180, 225, 270, 315)strength (calcolo in pixel) |
chroma() |
trasparenza colore | color (valore del colore) |
dropShadow() |
effetto ombra | color (valore del colore)offx (scostamento orizzontale in pixel)offy (scostamento verticale in pixel)positive (1 o 0) |
flipH() |
immagine riflessa orizzontalmente | nessuna |
flipV() |
immagine riflessa verticalmente | nessuna |
glow() |
luminosità del lato più esterno | color (valore del colore)strength (intensità da 1 a 255) |
invert() |
livelli opposti di tonalità, saturazione e luminosità | nessuna |
light() |
aggiunta di sorgente di luce | nessuna |
mask() |
sovrapposizione della maschera trasparente | color (valore del colore) |
shadow() |
visualizzazione come profilo | color (valore del colore)direction (0, 45, 90, 135, 180, 225, 270, 315) |
wave() |
distorsione senza onde | add (1 o 0)freq (numero intero di onde)light (forza da 0 a 100)phase (scostamento in percentuale da 0 a 100)strength (intensità da 0 a 255) |
xRay() |
renderizzazione dei soli lati | nessuna |
Esempi
Diamo di seguito alcuni esempi dell'applicazione dei filtri alla seguente immagine.
Cominciamo con il filtro alpha(). Il codice sarà dato ad Internet Explorer tramite commenti condizionali,
al fine di evitare errori nella validazione. Esempio:
.alpha {
filter:alpha(opacity=40);
}
Il risultato viene mostrato anche dal seguente screenshot di Explorer:
Passiamo quindi al filtro blur():
.blur {
filter:blur(add=1, direction=90, strength=20);
}
Il risultato viene evidenziato dal seguente screenshot:
Infine, osserviamo il comportamento del filtro flipH():
.flip {
filter:flipH();
}
Il risultato è del tutto simile a quello che otterremmo con un programma di fotoritocco. Screenshot:
