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: