home » design, Quick Resource, resources

Quick Resource: Pinterest CSS Layout

» 17 December 2012post by @liquidskydesign

Il segreto delle belle colonnine di Pinterest risiede in un javascript che calcola l’esatta altezza di ogni immagine postata e la posiziona in modo assoluto.

Pinterest, un esempio

Per replicarlo utilizziamo le colonne CSS3 prendendo come base lo script originale di Pixel Height, modificato da kushsolitary.

<div id=”columns”>
     <div class=”pin”>
          <img src=”http://placekitten.com/400/300″ alt=”PlaceKitten” />
          <p>Jean shorts street art flexitarian … </p>
     </div>
     <div class=”pin”>
         <img src=”http://placekitten.com/g/400/300″ alt=”PlaceKitten” />
         <p>Leggings pour-over banksy, DIY wolf tattooed … </p>
     </div>
    <!– aggiunta indiscriminata di colonne –>
</div>

Pinterest, una colonna

 Passiamo al foglio di stile:

 #columns { -moz-column-count: 3; -moz-column-gap: 10px; -moz-column-fill: auto; -webkit-column-count: 3; -webkit-column-gap: 10px; -webkit-column-fill: auto; column-count: 3; column-gap: 15px; column-fill: auto; }

 .pin { -moz-column-break-inside: avoid; -webkit-column-break-inside: avoid; column-break-inside: avoid; display: inline-block; margin: 0 2px 15px; padding: 15px; border: 2px solid #FAFAFA; box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4); background: #FEFEFE; background-image: linear-gradient(45deg, #FFF, #F9F9F9); }

 

column-count e column-gap implementati su #columns si rendono necessari per avere una migliore resa delle colonne.

L’aggiunta di column-break-inside: avoid; serve per evitare che l’immagine postata letteralmente cada sulla colonna seguente, obbligandola a rimanere entro i suoi confini.

Altro piccolo tweak da aggiungere per regolare il numero delle colonne a seconda del browser utilizzato (da escludere IE – non funziona):

@media all and (min-width: 960px) {
     #columns {
          column-count: 4; }
   }

 @media all and (min-width: 1170px) { #columns { column-count: 5; } }

 

 

All posts and images on ./lsd are under a copyleft licence and protected by Safe Creative; third party images are copyright of own creators.

 
 
Mitsume Temo & the Round Earth Committee
 

KVIrc theme: Behind the Curtain, a dark and lustful mooded theme
Retro Zone: la pubblicita' anni 80
Twitter cambia faccia, cambiamo il background - guida completa
La mia wishlist con gli occhi a mandorla
Solo&Fritto: dal Giappone una golosa novita' targata 019.tv