HOME - ERRIKO.IT

Erriko dot IT

Crea una gallery animata con effetto Polaroid in puro CSS

Ho già parlato di CSS3 e delle nuove prospettive che sta aprendo questa nuova versione del Cascading Style Sheets.
Oggi vorrei mostrarti come utilizzare alcune delle nuove funzionalità di CSS3 per creare una gallery animata senza ricorrere a Javascript.  Il tutto con un gradevole effetto simil-polaroid per visualizzare le immagini in maniera originale e dinamica.

Ricorda che questi effetti, per via dell’utilizzo di CSS3, sono compatibili solo con i browser più moderni. In linea di massima tutti i WebKit (Safari, Chrome sia desktop che mobile), Firefox, Opera.

DEMO DOWNLOAD

HTML

La struttura della pagina HTML è semplicissima: un box contenitore e tanti box con classe “polaroid” quante sono le foto da mostrare.

I div con classe polaroid saranno posizionati in maniera relativa, e conterranno l’immagine ed il titolo della stessa racchiuso in uno <span> che verrà posizionato in maniera assoluta.

<!DOCTYPE HTML>
<html>
	<head>
		<title>Polaroid con effetto animazione</title>
		<link rel="stylesheet" type="text/css" href="style.css" />
	</head>
	<body>
	<div id="contenuto">
	<div><img src="images/jobs.jpg" /><span>Apple's Founder</span></div>
	<div><img src="images/gates.jpg" /><span>Microsoft's Founder</span></div>
	<div><img src="images/facebook.jpg" /><span>Facebook's Founder</span></div>
	<div><img src="images/oracle.jpg" /><span>Oracle's Founder</span></div>
	</div>
	<div style="clear:both;"></div>
	</body>
</html>

Vediamo adesso cosa aggiungere al file style.css.

CSS effetto polaroid

 

Per creare l’effetto polaroid aggiungo uno sfondo bianco sotto l’immagine, che sia maggiore nella parte inferiore (basta usare il giusto padding). Con float:left mostro le polaroid una di fianco all’altra, le distanzio tra loro e imposto la posizione come relativa.

.polaroid{
width:150px;
background-color: #fff;
padding: 10px 10px 50px 10px;
margin-right: 30px;
float: left;
position: relative;  
}

Per rendere l’effetto più realistico metto un bordo di 1px sia all’immagine che al div polaroid stesso, al quale poi aggiungiamo anche una ombreggiatura.

.polaroid, .polaroid img{
border:1px solid #c2c2c2; 
}

.polaroid{
-moz-box-shadow:0 0 20px #292929;
-webkit-box-shadow:2px 5px 8px #292929;
box-shadow:2px 5px 8px #292929;
}

Infine posiziono il titolo delle immagini, racchiuso dentro lo <span>, in maniera assoluta. Così da visualizzarlo sotto la foto e sovrapposto allo sfondo bianco della polaroid.

.polaroid span{
position: absolute;
bottom: 20px;
left: 10px;
}

Animazione CSS

Una volta create le polaroid voglio che queste si animino al passaggio del mouse. Per questo specifico in .polaroid:hover una rotazione di -8 gradi utilizzando transform.

.polaroid:hover{
/* ruoto il box di 8 gradi a sx */
-webkit-transform: rotate(-8deg);
-moz-transform: rotate(-8deg);
transform: rotate(-8deg);
}

Già a questo punto le nostre immagini saranno animate. Passando sulle polaroid, infatti, queste ruoteranno a sinistra così come abbiamo comandato loro di fare. Tuttavia l’effetto è immediato, “a scatto” direi, cosa che a mio avviso è poco gradevole.
Per questo specifico, nella classe .polaroid, che tutte le trasformazioni di quella classe devono avvenire con una transizione di mezzo secondo, così da rendere l’effetto più “morbido”.

.polaroid{
-webkit-transition: all 0.5s ease-in-out;   
-moz-transition: all 0.5s ease-in-out;   
-o-transition: all 0.5s ease-in-out;
}

Conclusione

A questo punto abbiamo concluso. Già con questo codice basilare l’effetto è di tutto riguardo. Puoi migliorare ancora la visualizzazione delle immagini aggiungendo un zoom sull’immagine selezionata, migliorando la visualizzazione del titolo dell’immagine e quant’altro. Insomma: largo alla fantasia!

Se ti è piaciuto questo post

Mostra il tuo apprezzamento, condividi!

Rimani sempre aggiornato:

  • http://www.clshack.it Alessio

    Come sempre ottimo articolo :D

    • http://erriko.it/?fbconnect_action=myhome&userid=29 Erriko

      Grazie Alessio, com sempre troppo buono. E’ un’idea che mi è venuta stamattina e sentivo l’impellenza di condividere :)

  • Pingback: upnews.it

  • davide

    Ciao,
    bell’articolo…complimenti….
    ma nel codice che hai postato tu non applichi la classe polaroid a nulla….
    a cosa la devo applicare per ottenere il tuo risultato?
    grazie

    • http://erriko.it/?fbconnect_action=myhome&userid=29 Enrico Deleo

      Grazie. Probabilmente il syntax highlighter del post ha rimosso la classe. E’ applicata ai div all’interno di #contenuto