Filtri CSS di Internet Explorer 6

Filtri CSS di Internet Explorer 6

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.

Filtri in Internet Explorer 6
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.

Duck

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:

Screenshot di Internet Explorer

Passiamo quindi al filtro blur():


.blur {
  filter:blur(add=1, direction=90, strength=20);
}

Il risultato viene evidenziato dal seguente screenshot:

Screenshot di Internet Explorer

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:

Screenshot di Internet Explorer

Torna su