Pubblicare foto con Effetto Polaroid usando il CSS.

Tre codici per mostrare le immagini con effetto Polaroid.

La gloriosa azienda Polaroid con l'avvento della fotografia digitale ha terminato la produzione delle sue macchine fotografiche che erano le sole fino a qualche decennio fa in grado di ottenere la foto già sviluppata dopo pochi secondi. La Polaroid comunque ha diversificato i suoi prodotti ed è tuttora sul mercato con le cosiddette photoprinter una specie di stampanti portatili e altri prodotti simili.

Le foto fatte con la Polaroid erano un po' diverse da quelle ottenute con la stampa tradizionale. Di qualità inferiore con però un fascino particolare che è rimasto immutato nel tempo. Anche adesso nei filtri di siti come Instagram, di applicazioni web o di app per cellulari l'Effetto Polaroid è sempre presente.

In questo articolo vedremo tre tipi di effetti che ricordano le Polaroid ottenuti esclusivamente con il linguaggio CSS. I codici potranno essere inseriti così come sono in un post in modalità HTML oppure in un widget andando su Layout > Aggiungi un gadget > HTML/Javascript.

Alternativamente il codice compreso tra le righe <style> e </style> escluse potrà essere incollato in Modello > Modifica HTML subito sopra alla riga  ]]></b:skin>. Il resto del codice dovrà invece essere incollato nel post o nel widget in cui visualizzare le foto con Effetto Polaroid. Questa seconda opzione è consigliabile quando si voglia utilizzare questo codice molto spesso per evitare di incollare sempre la prima parte del codice vale a dire le regole CSS.

EFFETTO POLAROID SEMPLICE

Cominciamo con en Effetto Polaroid semplicissimo che si ottiene con questo codice

<style>
img.polaroid2 {
    background:#000;
    border:solid #fff;
    border-width:6px 6px 20px 6px;
    box-shadow:1px 1px 5px #333;
    -webkit-box-shadow:1px 1px 5px #333;
    -moz-box-shadow:1px 1px 5px #333;
    height:200px;
    width:200px;
}
</style>
<img class="polaroid2" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijfeQihlE7x89JJ88ExyyLHFuntiyFSphut83btHIFyACb3fVeDTdpsflDzrOpj896cO-awEa-Q_KI0jQFS3HhMjtvPXN-fVPsxrRKcL4S6POn5mLSXcR-XczixY2pTExSCipYqRWkPJE/s300/onda.jpg"/>

e che mostrerà solo una singola foto con questo effetto

L'URL della foto deve ovviamente essere cambiato e si possono anche personalizzare le dimensioni.

 

EFFETTO POLAROID CON GOOGLE FONT E DESCRIZIONE

Si può usare un carattere personalizzato di Google Fonts per creare un effetto che mostri anche la descrizione della stessa immagine. Il codice di base in questo caso sarà

<style>
.polaroid1 {
  position: relative;
  width: 220px;
}
.polaroid1 img {
  border: 10px solid #fff;
  border-bottom: 45px solid #fff;
  -webkit-box-shadow: 3px 3px 3px #777;
     -moz-box-shadow: 3px 3px 3px #777;
          box-shadow: 3px 3px 3px #777;
}
.polaroid1 p {
  position: absolute;
  text-align: center;
  width: 100%;
  bottom: 0px;
  font: 400 18px/1 'Kaushan Script', cursive;
  color: #888;
}
</style>
<link href="http://fonts.googleapis.com/css?family=Kaushan+Script" rel="stylesheet" type="text/css"><div class="polaroid1">
  <p>Francesca,  Luglio 2015</p>
  <img src="https://lh3.googleusercontent.com/-mXok9eYuotA/VT5Ef3s-s3I/AAAAAAAAsiM/kmIuJje9xc0/s279/default.jpg">
</div>

Il risultato sarà simile al seguente

Francesca, Luglio 2015

Si incolla l'URL della nostra foto e si può personalizzare il carattere di Google Fonts modificando la riga evidenziata di giallo. La descrizione è rappresentata dal testo colorato di blu.

 

EFFETTO POLAROID CON TRE IMMAGINI

Vediamo adesso un Effetto Polaroid con tre immagini una accanto all'altra. In questo caso è più complesso ma non impossibile modificare le dimensioni visto che i parametri delle stesse cono collegati gli uni agli altri. Il codice proposto per questo ultimo effetto è il seguente:

<style>
#polaroid{
width:100%;
overflow:hidden;
padding:20px 10px;
}
#polaroid figure{
float:left;
position:relative;
width:200px;
margin:10px 20px;
padding: 6px 8px 10px 8px;
-webkit-box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75);
-moz-box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75);
box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75);
background: #eee6d8;
background: -webkit-linear-gradient(top, #ede1c9, #fef8e2 20%, #f2ebde 60%);
background: -moz-linear-gradient(top, #ede1c9, #fef8e2 20%, #f2ebde 60%);
background: -o-linear-gradient(top, #ede1c9, #fef8e2 20%, #f2ebde 60%);
background: -ms-linear-gradient(top, #ede1c9, #fef8e2 20%, #f2ebde 60%);
background: linear-gradient(top, #ede1c9, #fef8e2 20%, #f2ebde 60%);
-webkit-transform:rotate(-1deg);
-moz-transform: rotate(-1deg);
-o-transform: rotate(-1deg);
-ms-transform: rotate(-1deg);
transform: rotate(-1deg);
-webkit-backface-visibility:hidden;
}
#polaroid figure:nth-child(even) {
-webkit-transform:rotate(2deg);
-moz-transform: rotate(2deg);
-o-transform: rotate(2deg);
-ms-transform: rotate(2deg);
transform: rotate(2deg);
-webkit-backface-visibility:hidden;
-webkit-box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75);
-moz-box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75);
box-shadow: -4px 4px 8px -4px rgba(0, 0, 0, .75);
}
#polaroid figure:before {
content: '';
display: block;
position: absolute;
left:5px;
top: -15px;
width: 75px;
height: 25px;
background-color: rgba(222,220,198,0.7);
-webkit-transform: rotate(-12deg);
-moz-transform: rotate(-12deg);
-o-transform: rotate(-12deg);
-ms-transform: rotate(-12deg);
}
#polaroid figure:nth-child(even):before {
left:150px;
top: -15px;
width: 55px;
height: 25px;
-webkit-transform: rotate(12deg);
-moz-transform: rotate(12deg);
-o-transform: rotate(12deg);
-ms-transform: rotate(12deg);
}
#polaroid figcaption{
text-align:center;
font-family: 'Reenie Beanie', cursive;
font-size:1.3em;
color:#454f40;
letter-spacing:0.09em;
}
#polaroid figure{
-pie-background: linear-gradient(#ede1c9, #fef8e2 20%, #f2ebde 60%);
position:relative;
padding-top:10px\9;
padding-right:10px\9;
}
</style>
<link href='http://fonts.googleapis.com/css?family=Reenie+Beanie' rel='stylesheet' type='text/css'><div id="polaroid">
<figure>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhp77W5lVMmjHVihM5RGm9pWow-psPJ34Gy3tIgodZExFPW66Xli6hrHSyq7j9cMPD_LlEMZL4L_2GwtuhYNOaXUBRmNmxxsWniJ3xGWiPegwH4_AQ_8RBqB4ovrScyk-3AobDgqmBcdI8/s300/acquajpg.jpg" width="200" height="200" alt="Gavettone per bambino" />
<figcaption>Gavettone per bambino</figcaption>
</figure>
<figure>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8akiWaoX7BqpozBwIh4kPaVZ6mbcRvVo11Qo9wbnosjXyjZKOPfhiWuuN_F00Ia6LdvhjNoc7c6QflwCczQ8AQu6gAip5eljAjIQUMtTH1-zmXWNE1tG3TZ9veyfbOdatWhUcm8W73Ng/s300/canna-bolla.jpg" width="200" height="200" alt="Cane con bolla" />
<figcaption>Cane con bolla</figcaption>
</figure>
<figure>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijfeQihlE7x89JJ88ExyyLHFuntiyFSphut83btHIFyACb3fVeDTdpsflDzrOpj896cO-awEa-Q_KI0jQFS3HhMjtvPXN-fVPsxrRKcL4S6POn5mLSXcR-XczixY2pTExSCipYqRWkPJE/s300/onda.jpg" width="200" height="200" alt="Onda sulla spiaggia" />
<figcaption>Onda sulla spiaggia</figcaption>
</figure>
</div>

Sono stati utilizzati dei tag specifici del CSS3 e per rendere le descrizioni più originali è stato importato il carattere Reenie Beanie mediante la riga evidenziata di giallo.  Tale riga va incollata sopra </head> nel caso optaste per installare il CSS nel modello invece di incollare tutto il codice nel post o nel widget. Il risultato di questo effetto sarà simile al seguente  

Per rendere più caratteristiche le immagini potete consultare gli altri post con Etichetta Effetti.