L’idea di oggi era quella di trovare un metodo per presentare in modo carino ed affascinante le immagini all’interno di una pagina web. Stanco dei soliti sistemi troppo “potenti”, volevo qualcosa che fosse tanto semplice quanto d’impatto visto che un cliente aveva chiesto questo per il suo sito.
La prima idea che mi è balzata in mente è stata quella di creare un effetto polaroid sulle foto che mi erano state inviate ma questa volta non avrei usato GIMP come sono solito fare ma avrei creato il tutto con CSS3 in modo da applicare l’effetto a qualsiasi immagine in mio possesso. Visto il grande ritorno del vintage e il successo di Instagram, l’idea mi pareva molto bella per un sito moderno e giovane.
Partendo dal presupposto che una foto nel vecchio formato polaroid ha di per sè una base estetica molto semplice, vediamo come strutturare l’idea e come svilupparla in poche righe di CSS.
 |
| fonte: http://media.photobucket.com/image/recent/labelle_7/polaroid.jpg |
Si vede facilmente come la struttura della foto sia composta dall’immagine principale (centrata in orizzontale), un contorno bianco che presenta, rispetto al bordo esterno, due distante diverse: una è data dalla distanza maggiore del lato inferiore rispetto al corpo centrale vero e proprio mentre gli altri tre lati hanno pari distanza.
Inoltre per rendere l’immagine più “dinamica” si potrebbe pensare di aggiungere una lieve ombra che da sicuramente un tocco più realistico alla composizione.
Vediamo il codice CSS usato per dare l’effetto voluto:
Il codice è molto semplice. Analizzando il tag della classe .polaroid, con le prime tre righe si crea il bordo bianco intorno all’immagine, le quattro che seguono creano una lieve ombra intorno al contenitore (cercando di mantenere la compatibilità con tutti i browser) che nel nostro caso rappresenta l’intera foto, mentre l’ultimo rigo serve a mantenere l’immagine vera e propria centrata nel bordo bianco. Per quanto riguarda il tag img, invece, si è semplicemente detto al css di fare in modo che l’immagine si adatti al contenitore in cui viene inserita.
Ora vediamo il codice HTML per creare la foto nelle nostre pagine web:
Sicuramente con poche righe di codice è possibile avere un effetto molto carino e di impatto senza dover ricorrere a programmi di fotoritocco o pesanti righe di codice javascript.
Per visualizzare un esempio potete visitare questa pagina.