Pubblicato il 02/07/15e aggiornato il

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://lh3.googleusercontent.com/-w4M1penVpiI/VZUyH5vZEUI/AAAAAAAAuUA/R2D4eFqnTZA/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://lh3.googleusercontent.com/-yxhNRnLVaqU/VZUyChaQRfI/AAAAAAAAuTw/hitZwmjgIWE/s300/acquajpg.jpg" width="200" height="200" alt="Gavettone per bambino" />
<figcaption>Gavettone per bambino</figcaption>
</figure>
<figure>
<img src="https://lh3.googleusercontent.com/--bJQr4HNHmU/VZUyFOU1GoI/AAAAAAAAuT4/f8ukN4OI0Js/s300/canna-bolla.jpg" width="200" height="200" alt="Cane con bolla" />
<figcaption>Cane con bolla</figcaption>
</figure>
<figure>
<img src="https://lh3.googleusercontent.com/-w4M1penVpiI/VZUyH5vZEUI/AAAAAAAAuUA/R2D4eFqnTZA/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  

effetto-polaroid


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




2 commenti :

  1. uffa non ci sono riuscita :( ... cioè la polaroid è uscita nel blog ma non ho capito come recuperare il codice dalla mia foto per poterlo sostituire alla tua . sono una frana ;( . ti va di aiutarmi ?

    RispondiElimina
    Risposte
    1. Non devi fare altro che sostituire l'indirizzo della tua foto, o delle tue foto, all'URL della immagine che ho usato come test e che è colorato di rosso. Se non sai come ottenere il link diretto di una immagine leggi questo post
      http://www.ideepercomputeredinternet.com/2013/03/picasa-image-hotlink.html
      @#

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.