Ultimo aggiornamento: Maggio 2009
La proprietà CSS3 opacity (opacità) permette di cambiare la trasparenza d’un elemento.
La proprietà opacity richiede un valore tra 0.0 (uguale a 100% trasparente) e 1.0 (niente trasparenza).
E scritto come di seguito per esempio d’opacità di 60%:
opacity: 0.6;
opacity non e supportato da Internet Explorer per quale possiamo usare la proprietà ‘alpha filter’ implementata dalla Microsoft.
Questa proprietà di ‘filtro alfa’ richiede un valore tra 0 (completamente trasparente) e 100 (non trasparente).
E scritto come di seguito per esempio d’opacità di 60%:
filter: alpha(opacity=60); /*per Internet Explorer 6-7*/
filter: “alpha(opacity=60)”; /*per Internet Explorer 8*/
NB: Internet Explorer 8 richiede un Doctype in modo Strict per funzionare
Aggiungo qualche esempi su come usare la proprietà opacity per immagine, effetto sullo stato hover e su un testo. Attenzione che con il testo,
di nuovo Internet Explorer richiede altri parametri per rendere valido l’effetto. Vedete l’esempio finale.
1. Esempio d’opacità al 50% per immagine:
Il CSS:
img{
opacity:.50;
filter:alpha(opacity=50);
filter:”alpha(opacity=50)”;
}
2. Esempio d’opacità al 100% per immagine, il quale è proprio inutile altro che per capire il valore massimale di opacità:
Il CSS:
img{
opacity:1;
filter:alpha(opacity=100);
filter:”alpha(opacity=100)”;
}
3. Effetto da 100 a 40 sul stato hover:
Il CSS:
a:hover img{
opacity:.40;
filter:alpha(opacity=40);
filter:”alpha(opacity=40)”;
}
4. Effetto da 40 a 100 sul stato hover:
Il CSS:
a img{
opacity:.40;
filter:alpha(opacity=40);
filter:”alpha(opacity=40)”;
}
a:hover img{
opacity:1;
filter:alpha(opacity=100);
filter:”alpha(opacity=100)”;
}
5. Esempio di diferenza tra un testo normale ed un testo ad opacità di 60%:
Il CSS:
Imposto una misura di carattere di 2em (200%) per vedere meglio l’effetto:
p.opacity{
font-size:2em;
Le due righe seguente sono necessarie per Internet Explorer…
Imposto una larghezza di 100%. Internet Explorer non applica l’effeto ad un testo se non è definito una larghezza o un altezza o è posizionato
usando float per esempio.
width:100%;
Imposto una sfondo bianco, di nuovo per Internet Explorer. Senza un colore di sfondo, gli contorni del testo a quale è applicato
l’effeto di opacità vengono legermente distorti. L’aggiunta del colore di sfondo sembra corregere quel problemino con IE.
background-color: #FFFFFF;
L’effeto d’opacità come visto prima:
opacity:.60;
filter:alpha(opacity=60);
filter:”alpha(opacity=60)”;
}
Il risultato:
Proprietà css opacity 100
Proprietà css opacity 60
Nota: per browser più vecchi si usava l’equivalente css3 ‘ -moz-opacity’. Il suo uso non è più necessario
{ 1 trackback }
{ 0 comments… add one now }