CSS3: effetto foto piegata!

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:

<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:

ul.box li {
	list-style-type: none;
	margin: 0 30px 30px 0;
	padding: 0;
	width: 250px;
	height: 150px;
	border: 1px solid #efefef;
	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:

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); }

Chi ha letto questo articolo, ha gradito anche:

1. CSS3: compatibilità cross-browser…da oggi!
2. 10+ HTML5-CSS3 Website Template: per iniziare a progettare il web di domani!
3. CSS3 Columns e jQuery: layout multi-colonne ad altezza pari
4. CSS Pseudo-classi: come usarle su IE6+!
5. Internet e il web: cosa è? Come funziona?