polaroid in puro css3

Le polaroid hanno sempre avuto il loro fascino, collezionisti vintage di tutto il mondo ricercano questi cimeli di ormai 30/40 anni fa per aggiungerli alla loro collezione e perché no riportartle in vita dando al proprio album fotografico un tocco vintage senza filtri di instagram.

Mentre questi pazienti collezionisti procedono con la loro ricerca io oggi voglio trasportare le polaroid sul web creando in puro CSS una galleria di polaroid, sei curioso? Non ti resta che leggere il tutorial!

Anteprima galleria polaroid

Guarda la demo per vedere cosa andremo a creare

 

1^ Step – Struttura HTML

La struttura HTML della galleria è molto semplice, si tratta fondamentalmente di inserire le immagini all’interno di un link.

L’attributo title del link deve essere riempito dato che successivamente useremo il valore al suo interno per creare la didascalia.

 2^ step – Diamo un po’ di stile

Dopo aver creato la struttura HTML è giunto il momento di dare un po’ di stile al tutto, inizieremo dal tag a, il quale donerà alla polaroid il suo tipico aspetto.

Arrivati a questo punto possiamo già inserire la didascalia sulla nostra polaroid sempre tramite CSS

Ci tengo ad evidenziare l’utilizzo che ho fatto della proprietà content e del relativo valore, prendo il valore dell’attributo title del link e lo inserisco subito dopo il link.

Per essere sicuri che l’immagine non sbordi utilizza queste due proprietà

 3^ step – Buttiamo le carte in tavola

La polaroid è stata create, ma un po’ di dinamicità in più non guasta mai, ruotiamo le immagini in maniera del tutto casuale.

Per ruotare le polaroid sono ricorso al selettore nth-child il quale mi permette di scegliere l’elemento sulla quale interagire (2n = secondo, 3n = terzo), di seguito ho trasformato l’elemento ruotandolo di un numero casuale di gradi.

4^ step – Raccogliamo una foto

Per dare l’effetto di raccolta useremo il selettore :hover 

Il codice ruota l’immagine riportandola a 0 gradi, la ingrandisce, la porta ad un livello più alto in modo tale da non creare confusione con gli altri elementi ed infine aumenta l’intensità dell’ombra.

Conclusioni

Questo è tutto, ora sai come creare un galleria di polaroid in puro CSS3 senza ricorrere per forza ad altri linguaggi come jQuery.

 

Vuoi un tutorial in particolare? Perché non me lo scrivi nei commenti qui sotto?

 

Crediti foto: Roger Oddone & Tony Huynh on Behance