In questo articolo desidero suggerirvi un semplice metodo per applicare il riflesso ad un’immagine utilizzando soltanto del codice CSS3. L’immagine avrà sicuramente un’aspetto più elegante e tutto questo senza ricorrere ad alcun software di fotoritocco o altro. Vediamo come fare per ottenere il nostro riflesso immagine.
Riflesso immagine – Codice CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
.reflection .image-wrap:after { position: absolute; content: ' '; width: 100%; height: 30px; bottom: -31px; left: 0; -webkit-border-top-left-radius: 20px; -webkit-border-top-right-radius: 20px; -moz-border-radius-topleft: 20px; -moz-border-radius-topright: 20px; border-top-left-radius: 20px; border-top-right-radius: 20px; background: -moz-linear-gradient(top, rgba(0,0,0,.3) 0%, rgba(255,255,255,0) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,.3)), color-stop(100%,rgba(255,255,255,0))); background: linear-gradient(top, rgba(0,0,0,.3) 0%,rgba(255,255,255,0) 100%); } .reflection .image-wrap:hover { position: relative; top: -8px; } |
Riflesso immagine – Codice HTML
|
1 2 3 4 5 6 7 |
<div class="reflection"> <span class="image-wrap" style="position:relative; display:inline-block; background:url(la-vostra-immagine.jpg) no-repeat center center; width: 627px; height: 230px;-moz-border-radius:20px;-webkit-border-radius:20px;border-radius:20px;"> <img src="la-vostra-immagine.jpg" style="opacity: 0" /></span> </div> |
E vediamo ora il risultato finale!
Bello vero? Allora buon lavoro e buoni esperimenti creativi!
pixolo ads
| Articolo pubblicato 4 anni fa nella categoria 
