{"id":8,"date":"2012-10-13T10:32:00","date_gmt":"2012-10-13T10:32:00","guid":{"rendered":"http:\/\/e-ware.org\/blog\/?p=8"},"modified":"2012-10-13T10:32:00","modified_gmt":"2012-10-13T10:32:00","slug":"css3-effetto-polaroid","status":"publish","type":"post","link":"http:\/\/e-ware.org\/blog\/css3-effetto-polaroid\/","title":{"rendered":"CSS3 – Effetto polaroid"},"content":{"rendered":"
\u00a0\u00a0 <\/div>\n
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.<\/div>\n
La prima idea che mi \u00e8 balzata in mente \u00e8 stata quella di creare un effetto polaroid<\/b> 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.<\/div>\n
<\/div>\n
Partendo dal presupposto che una foto nel vecchio formato polaroid ha di per s\u00e8 una base estetica molto semplice, vediamo come strutturare l’idea e come svilupparla in poche righe di CSS.<\/div>\n
<\/div>\n\n\n\n\n
<\/a><\/td>\n<\/tr>\n
fonte: http:\/\/media.photobucket.com\/image\/recent\/labelle_7\/polaroid.jpg<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
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 \u00e8 data dalla distanza maggiore del lato inferiore rispetto al corpo centrale vero e proprio mentre gli altri tre lati hanno pari distanza.<\/div>\n
Inoltre per rendere l’immagine pi\u00f9 “dinamica” si potrebbe pensare di aggiungere una lieve ombra che da sicuramente un tocco pi\u00f9 realistico alla composizione.<\/div>\n
<\/div>\n
Vediamo il codice CSS usato per dare l’effetto voluto:<\/div>\n
<\/div>\n
<\/div>\n
<\/div>\n
Il codice \u00e8 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\u00e0 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 \u00e8 semplicemente detto al css di fare in modo che l’immagine si adatti al contenitore in cui viene inserita.<\/div>\n
<\/div>\n
Ora vediamo il codice HTML per creare la foto nelle nostre pagine web:<\/div>\n
<\/div>\n
<\/div>\n
<\/div>\n
Sicuramente con poche righe di codice \u00e8 possibile avere un effetto molto carino e di impatto senza dover ricorrere a programmi di fotoritocco o pesanti righe di codice javascript.<\/div>\n
<\/div>\n
Per visualizzare un esempio potete visitare questa pagina<\/a>.<\/div>\n
\u00a0 <\/div>\n
<\/div>\n","protected":false},"excerpt":{"rendered":"

\u00a0\u00a0 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 \u00e8 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8,10,4,9],"tags":[],"class_list":["post-8","post","type-post","status-publish","format-standard","hentry","category-css3","category-html","category-opencode","category-web-design"],"views":2489,"_links":{"self":[{"href":"http:\/\/e-ware.org\/blog\/wp-json\/wp\/v2\/posts\/8","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/e-ware.org\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/e-ware.org\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/e-ware.org\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/e-ware.org\/blog\/wp-json\/wp\/v2\/comments?post=8"}],"version-history":[{"count":0,"href":"http:\/\/e-ware.org\/blog\/wp-json\/wp\/v2\/posts\/8\/revisions"}],"wp:attachment":[{"href":"http:\/\/e-ware.org\/blog\/wp-json\/wp\/v2\/media?parent=8"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/e-ware.org\/blog\/wp-json\/wp\/v2\/categories?post=8"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/e-ware.org\/blog\/wp-json\/wp\/v2\/tags?post=8"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}