Colonne coi CSS.Creare contenuti suddivise in diverse colonne.

Coi CSS3 abbiamo la possibilità di dividere il nostro contenuto in colonne, senza crere ulteriori box e piazzare al interno il contenuto. Una proprietà facile da capire con grande potenzialità per varie tipi di  siti. Per esempio di cucina , di viaggi e cosi via. Con la proprietà columns o column-count  possiamo dividere in colonne non solo del testo ma anche immagini.

Creare colonne con la proprieta column-count

Creeremo un semplice articolo con il tag article del HTML5

Dividere per colonne

Per dividere il nostro articolo in colonne utilizzeremo la proprieta column-count: o columns dei CSS

<article>  
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc libero magna, venenatis quis aliquet et, rutrum in augue. Donec vel tempor dolor. Donec volutpat fringilla porta. Suspendisse non nulla tortor. Quisque commodo ornare mi, sit amet aliquet justo bibendum non. Integer bibendum convallis sapien, sit amet tincidunt orci placerat in. Integer vitae consequat augue.  
</article>  

colonne1

 Vediamo come scrivere e gestire questa proprieta .

article {  
-webkit-column-count:2;  
-moz-column-count:2;  
column-count:2;  /* il 2 è la quantita delle colonne che vogliamo creare*/
}  

Il nostro risultato

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc libero magna, venenatis quis aliquet et, rutrum in augue. Donec vel tempor dolor. Donec volutpat fringilla porta. Suspendisse non nulla tortor.Quisque commodo ornare mi, sit amet aliquet justo bibendum non. Integer bibendum convallis sapien, sit amet tincidunt orci placerat in. Integer vitae consequat augue.

2.Larghezza delle colonne

Utilizzando le proprietà column-width è possibile specificare la larghezza desiderata delle colonne:

article {  
-moz-column-width: 150px;  
-webkit-column-width: 150px;   
column-width: 150px;  
}  

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc libero magna, venenatis quis aliquet et, rutrum in augue. Donec vel tempor dolor. Donec volutpat fringilla porta. Suspendisse non nulla tortor. Quisque commodo ornare mi, sit amet aliquet justo bibendum non. Integer bibendum convallis sapien, sit amet tincidunt orci placerat in. Integer vitae consequat augue.

3.L'intervallo tra le colonne

L'intervallo viene creato tramite la proprietà column-gap in px o em, e non può essere negativo:

article {     
-webkit-column-gap: 30px;  
-moz-column-gap: 30px;  
column-gap: 30px;  
}  

colonne gap

4.Separazione colonne

Proprietà column-rule  consente di aggiungere un separatore tra le colonne, il principio di funzionamento è simile a quello del border in css

colonne rule
 

article {  
-moz-column-rule: 1px dotted #ccc;  
-webkit-column-rule: 1px dotted #ccc;  
column-rule: 1px dotted #ccc;  
}  

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc libero magna, venenatis quis aliquet et, rutrum in augue. Donec vel tempor dolor. Donec volutpat fringilla porta. Suspendisse non nulla tortor. Quisque commodo ornare mi, sit amet aliquet justo bibendum non. Integer bibendum convallis sapien, sit amet tincidunt orci placerat in. Integer vitae consequat augue.

E vediamo anche un esempio con immagini

<style type="text/css">
.colonna {
  line-height: 0;
  columns: 3;/*proprieta uguale a column-count*/
  -moz-columns: 3;
  -webkit-columns: 3;
  column-gap: 5px;
  -moz-column-gap: 5px;
  -webkit-column-gap: 5px;
}.colonna img{
  width: 100% !important;
  height: auto !important;
  padding: 0px;
}
</style><div class="colonna">
  <img src="/images/kursy/CamtasiaStudioBox.png"/>
  ........
  <img src="/images/kursy/domen.png"/>
</div>

E il risultato

Letto 326 volte

corso CSS pratica

Impara HTML e CSS da zero al risulto!

Da piccolo hai imparato leggere leggendo libri. E con aiuto del nostro corso imparerai CSS e HTML costruendo un sito web da un templat in PSD .

Scopri il corso