Effetto sfumatura su immagine con i Css

Corso online Responsive Design
Realizzare siti responsivi con HTML5 e CSS3.

Scritto da Luca Ruggiero nella sezione Css

Vi è mai capitato di creare un'immagine troppo viva e non sapere come fare a sfumarla utilizzando il vostro programma di grafica? Niente paura... arrivano i Css!

Applichiamo un filtro all'immagine con l'attributo filter, assegnandogli il valore alpha e passando ad alpha tra parentesi il parametro opacity che stabilisce (numericamente) il grado di sfumatura.

Esaminiamo il codice:

<img src="immagine.gif" style="filter: Alpha(Opacity=40);">
Il valore è espresso in percentuale, anche se il simbolo % non viene riportato, più basso è il valore e maggiore sarà la sfumatura sull'immagine.

Ecco un esempio
Immagine normale Immagine sfumata al 40%

I più cliccati della sezione Css

:: Effetto testo barrato con con i Css (48.003)

:: Referenze dei fogli di stile Css (41.760)

:: Menu ad effetto mouseover con i Css (39.091)

:: Effetti sui link con i Css (29.617)

:: Testo verticale coi Css (19.875)

:: Angoli smussati in un box coi Css (18.851)

:: Box con effetto ombra con i CSS3 (16.159)

:: Posizionare un layer centrato rispetto alla risoluzione con i Css (16.140)

:: Stilizzare i form Html con i Css (15.906)

:: CSS Expression, ovvero: integrare Javascript in un foglio di stile (15.555)

IN EVIDENZA
DOWNLOAD