PROPRIETA' ALFA

opacity =...

regola il grado di opacità dell'oggetto

opacity = 0 invisibile
opacity = 100 massima visibilità

Stabilisce l'opacità di partenza quando è usata insieme a finishopacity

finishopacity =...

Stabilisce l'opacità finale per l'oggetto. Ecco allora che la trasparenza dell'oggetto diventa graduale (ad esempio da 20 a 100)

style =...

Stabilisce il tipo di gradiente:

style = 1 Gradiente lineare
style = 2 Gradiente radiale
style = 3 Gradiente rettangolare

startx =... starty =... finishx =... finishy =...

Stabiliscono, rispettivamente, le coordinate da cui avrà inizio e in cui avrà fine l'applicazione della proprietà "opacity"

Esempi di codice e risultati
Codice (Stile=1):
<TD style="FILTER: alpha(finishopacity=0, style=1); WIDTH: 100%; COLOR:red" bgColor=#f0e68c height=20>I colori di sfondo e di primo piano diminuiscono l'opacità secondo un gradiente lineare
I colori di sfondo e di primo piano diminuiscono l'opacità secondo un gradiente lineare

**Esempi di codice e risultati**
Codice (Stile=1): <TD style="FILTER: alpha(finishopacity=0, style=1); WIDTH: 100%; COLOR:red" bgColor=#f0e68c height=20>I colori di sfondo e di primo piano diminuiscono l'opacità secondo un gradiente lineare
I colori di sfondo e di primo piano diminuiscono l'opacità secondo un gradiente lineare

Codice: (Stile=2)
<TD style="FILTER: alpha(finishopacity=0, style=2); WIDTH: 100%; COLOR: red" bgColor=navy height=20> I colori di sfondo e di primo piano diminuiscono l'opacità secondo un gradiente radiale
I colori di sfondo e di primo piano diminuiscono l'opacità secondo un gradiente radiale

Codice: (Stile=3)
<TD style="FILTER: alpha(finishopacity=0, style=3); WIDTH: 100%; COLOR: red" bgColor=#f0e68c height=20> I colori di sfondo e di primo piano diminuiscono l'opacità secondo un gradiente rettangolare
I colori di sfondo e di primo piano diminuiscono l'opacità secondo un gradiente rettangolare

Codice:
<h4 style="filter:opacity=70, finishopacity=0, style=1, startx=0, starty=0, finishx=180); color:navy"> La scritta diventa gradualmente trasparente, fino a scomparire ....</h4>

La scritta diventa gradualmente trasparente, fino a scomparire ....
Notare che non è necesario inserire tutte le opzioni. Ad esempio, quando non viene inserito "opacity", il valore iniziale è preso come 100, cioè nessuna trasparenza.
Se non si dichiara la proprietà width dell'elemento la proprietà alpha non funziona. Per questo è necessario, se si vuole applicare un filtro ad un testo, dichiarare all'inizio uno stile.

Se si vuole che l'ultimo esempio funzioni occorre quindi inserire fra i tags <head> ed </head> il seguente codice:
<Style> h4{
width=90%
}
</Style>

Codice:
<IMG style="FILTER: alpha(opacity=20, finishopacity=100, style=1)" src="lg2.gif" width=155 height=76 >
In questo caso la trasparenza va diminuendo da sinistra verso destra, con un gradiente lineare

Codice:
<IMG onmouseover="this.filters.alpha.opacity='100'" style="FILTER: alpha(opacity=50); moz-opacity: 50%" onmouseout="this.filters.alpha.opacity='50'" height=76 src="lg2.gif" width=155>
Questo è un effetto "OnMouseOver". Passando con il mouse sopra l'immagine questa acquista colore, infatti la sua opacità passa dal 50% al 100%.

Codice:<form><INPUT type=button value=www.webfract.it onmouseover="this.filters.alpha.opacity='100'" style="FILTER: alpha(opacity=50); moz-opacity: 50%; BACKGROUND:red; FONT-WEIGHT: bold; FONT-FAMILY:Verdana" onmouseout="this.filters.alpha.opacity='50'" width=155 align=left onclick="window.open('http://www.webfract.it','tutto')"></form>

Anche questo è un effetto "OnMouseOver", applicato ad un bottone.

Continua...