Un tempo l’unico modo per sfumare un elemento o un’immagine era quello di utilizzare JavaScript o jQuery. Oggi, con CSS3 è possibile creare facilmente un effetto fade di dissolvenza con pochissime linee di codice ed in modo estremamente semplice.Questo effetto può essere applicato a piacimento al passaggio del mouse su di immagini o anche su semplice testo. Vediamo come.
Effetto Fade – Codice CSS
|
1 2 3 4 5 6 7 8 9 10 |
.fade { opacity: 1; transition: opacity .25s ease-in-out; -moz-transition: opacity .25s ease-in-out; -webkit-transition: opacity .25s ease-in-out; } .fade:hover { opacity: 0.5; } |
Applichiamo ora la classe CSS ad un’immagine:
|
1 |
<img src="http://www.pixolo.it/wp-content/uploads/2013/03/effetto-fade-css.jpg" alt="" width="628" height="300" class="fade" /> |
Risultato effetto fade (passa col mouse sopra l’immagine):
L’effetto fade come detto può essere applicato anche a del testo o elementi html come <div> o <p> in genere aggiungendo semplicemente la relativa classe CSS. Buon lavoro e alla prossima risorsa!
pixolo ads
| Articolo pubblicato 6 anni fa nella categoria 
