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 (52.017)

:: Referenze dei fogli di stile Css (42.128)

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

:: Effetti sui link con i Css (31.317)

:: Testo verticale coi Css (20.444)

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

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

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

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

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

IN EVIDENZA
DOWNLOAD