L’effetto foto piegata da un po’ di tempo circola come “nuovo” trend nel mondo del web: lo stile ricorda l’effetto di una cartolina piegata ai lati. Vediamo come realizzare questo effetto direttamente con le ombre CSS3, da applicare agli angoli inferiori di un elemento, e deformato con l’effetto CSS3 inclina.
Vogliamo ottenere tutto questo con l’utilizzo dei soli CSS: in particolare degli pseudo-elementi :before e :after. L’effetto finale risulta molto ben fatto e sicuramente subito utilizzabile per tutti i browser (mediante l’utilizzo dei tag proprietari dei vari browser), escluse però tutte le versioni di Internet Explorer!
CSS3: Galleria di immagini con ombre e effetto foto piegata!
Dobbiamo realizzare una galleria di immagini per un portfolio online? Ecco di seguito una pagina di esempio e il codice che ci serve:
Per cominciare, organizziamo le illustrazioni in una semplice lista non ordinata di elementi:
|
1 2 3 4 5 6 7 8 |
<ul class="box"> <li><img src="monster-03.png" width="250" height="150" alt="Monster" /></li> <li><img src="monster-04.png" width="250" height="150" alt="Monster" /></li> <li><img src="monster-02.png" width="250" height="150" alt="Monster" /></li> <li><img src="monster-01.png" width="250" height="150" alt="Monster" /></li> <li><img src="monster-05.png" width="250" height="150" alt="Monster" /></li> <li><img src="monster-06.png" width="250" height="150" alt="Monster" /></li> </ul> |
Applichiamo gli stili CSS (nell’ordine che vedete sotto) in modo tale che le immagini si dispongano una a fianco all’altra, e che abbiano un effetto di ombra interna ed esterna, ottenuta rispettivamente con le propietà CSS3 rgba() e rgba() inset:
|
1 2 3 4 5 6 7 8 9 |
ul.box li { list-style-type: none;<br /> margin: 0 30px 30px 0; padding: 0;<br /> width: 250px;<br /> height: 150px; border: 1px solid #efefef;<br /> position: relative; float: left; background: #ffffff; /* per i vecchi browser */ box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset; -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 60px rgba(0, 0, 0, 0.1) inset; -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset; } |
Fatto questo, trasformiamo gli oggetti con i CSS3: ecco come applicare gli stili per ottenere l’ombra esterna "piegata"!
Inseriamo due elementi posizionati absolute dietro ogni elemento della lista (con il corretto z-index), con gli pseudo-elementi :after e :before. Essi vengono poi ruotati con la proprietà transform:rotate, e deformati con la proprietà skew, che applica una inclinazione lungo gli assi X e Y.
Ecco cosa inserire:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
ul.box li:after { z-index: -1; position: absolute; background: transparent; width: 70%; height: 55%; content: ''; right: 10px; bottom: 10px; transform: skew(15deg) rotate(6deg); -webkit-transform: skew(15deg) rotate(6deg); -moz-transform: skew(15deg) rotate(6deg); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); } ul.box li:before { z-index: -2; position: absolute; background: transparent; width: 70%; height: 55%; content: ''; left: 10px; bottom: 10px; transform: skew(-15deg) rotate(-6deg); -webkit-transform: skew(-15deg) rotate(-6deg); -moz-transform: skew(-15deg) rotate(-6deg); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); } |