Programmazione Web » Css » Effetti di trasparenza sulle immagini
Effetti di trasparenza sulle immagini
Difficoltà:
Scritto da Michele Sassi
Sito Web: http://www.comefaccio.net 
Questo tutorial è stato letto 1378 volte
Alle volte può essere utile creare degli effetti di sfumatura per rendere più accattivanti alcuni elementi del body! Oggi vedremo come è possibile sfumare un'immagine senza dover ricorrere ad alcun programma di grafica!
Ovviamente, anche in questo caso, ci vengono in soccorso i Css offrendoci la proprietà filter da utilizzare nel seguente modo:
<style>
img#immagine {
filter:alpha(opacity=50);
}
</style>
Come abbiamo potuto notare il browser di casa Microsoft utlizza, per il valore di opacity, un range che varia da 0 a 100. E' inutile dire che sfumare un'immagine al 100% significa non ottenere alcun effetto! Per quanto riguarda i browser Gecko-based bisogna invece utilizzare queste proprietà, con un range che varia tra 0 e 1 (lo 0 viene omesso):
-moz-opacity:.50;
opacity:.50;
Inseriamo la nostra immagine, ricordandoci di assegnarle come id "immagine":
<img src="immagine.gif" name="immagine" width="200" height="150" id="immagine" />
Il gioco è fatto. Ricordate che è anche possibile sfumare altri elementi del body come p, div o altro ancora. Basterà cambiare solamente l'elemento e il suo id nel Css oppure creare una classe generica per tutti gli elementi in questo modo:
<style>
.sfumatura {
filter:alpha(opacity=50);
-moz-opacity:.50;
opacity:.50;
}
</style>
Aggiungi questo tutorial ai preferiti
