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

:: Referenze dei fogli di stile Css (41.900)

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

:: Effetti sui link con i Css (30.301)

:: Testo verticale coi Css (20.102)

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

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

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

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

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

IN EVIDENZA
DOWNLOAD