In questa guida vedremo come dividere facilmente un testo in colonne usando le proprietà di CSS3. Inizialmente, prima di creare le colonne, dobbiamo preparare un paragrafo di testo da usare per l’esempio, e inserirlo all’interno del tag HTML5 <article>, come di seguito:
|
1 2 3 |
<article> 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. Nulla facilisi. Praesent a nunc purus, nec feugiat velit. Mauris nisl sem, porta id luctus a, rhoncus sed mi. Nullam mattis blandit dui, vel pretium sem scelerisque et. Integer ullamcorper vehicula laoreet. Nulla pellentesque, metus a pretium euismod, libero elit vestibulum erat, at tempus odio magna non elit. Vestibulum vulputate nunc eget massa sollicitudin a imperdiet purus pretium. Ut nec enim vitae massa dictum cursus et et elit. </article> |
… e specificare la larghezza di 600px dal foglio di stile. Se non userete HTML5 creerete nell’indentico modo una classe css .article da associare al DIV contenitore del testo da suddividere in colonne.
Nell’esempio seguente divideremo il contenuto in 2 colonne con la proprietà CSS3 column-count.
|
1 2 3 4 5 |
article { -webkit-column-count:2; -moz-column-count:2; column-count:2; } |
Risultato:
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. Nulla facilisi. Praesent a nunc purus, nec feugiat velit. Mauris nisl sem, porta id luctus a, rhoncus sed mi. Nullam mattis blandit dui, vel pretium sem scelerisque et. Integer ullamcorper vehicula laoreet. Nulla pellentesque, metus a pretium euismod, libero elit vestibulum erat, at tempus odio magna non elit. Vestibulum vulputate nunc eget massa sollicitudin a imperdiet purus pretium. Ut nec enim vitae massa dictum cursus et et elit.
Oltre ad essere definite con la proprietà count, le colonne possono essere create specificando la larghezza tramite la proprietà column-width e lasciare che il browser decidaquante colonne possono essere generate.
In questo esempio, specificheremo la larghezza delle colonne a 150px, il che avrà l’effetto di suddividere il contenuto in 3 colonne:
|
1 2 3 4 5 |
article { -moz-column-width: 150px; -webkit-column-width: 150px; column-width: 150px; } |
Risultato:
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. Nulla facilisi. Praesent a nunc purus, nec feugiat velit. Mauris nisl sem, porta id luctus a, rhoncus sed mi. Nullam mattis blandit dui, vel pretium sem scelerisque et. Integer ullamcorper vehicula laoreet. Nulla pellentesque, metus a pretium euismod, libero elit vestibulum erat, at tempus odio magna non elit. Vestibulum vulputate nunc eget massa sollicitudin a imperdiet purus pretium. Ut nec enim vitae massa dictum cursus et et elit.
Column Gap specifica lo spazio di separazione di ogni colonna. Lo spazio può essere definito in em o px, e mai puo essere un valore negativo. Nell’esempio sotto specificheremo un gap di 40px, cosicchè lo spazio tra le colonne apparirà un po più esteso.
|
1 2 3 4 5 |
article { -webkit-column-gap: 40px; -moz-column-gap: 40px; column-gap: 40px; } |
Risultato:
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. Nulla facilisi. Praesent a nunc purus, nec feugiat velit. Mauris nisl sem, porta id luctus a, rhoncus sed mi. Nullam mattis blandit dui, vel pretium sem scelerisque et. Integer ullamcorper vehicula laoreet. Nulla pellentesque, metus a pretium euismod, libero elit vestibulum erat, at tempus odio magna non elit. Vestibulum vulputate nunc eget massa sollicitudin a imperdiet purus pretium. Ut nec enim vitae massa dictum cursus et et elit.
Column Rule è la proprietà che ci permette di inserire dei bordi di separazione traa le colonne. La proprietà column-rule funziona in maniera similare alla proprietà border. Così se ad esempio desidere dei bordi punteggiati tra le colonne userai:
|
1 2 3 4 5 |
article { -moz-column-rule: 1px dotted #ccc; -webkit-column-rule: 1px dotted #ccc; column-rule: 1px dotted #ccc; } |
Risultato:
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. Nulla facilisi. Praesent a nunc purus, nec feugiat velit. Mauris nisl sem, porta id luctus a, rhoncus sed mi. Nullam mattis blandit dui, vel pretium sem scelerisque et. Integer ullamcorper vehicula laoreet. Nulla pellentesque, metus a pretium euismod, libero elit vestibulum erat, at tempus odio magna non elit. Vestibulum vulputate nunc eget massa sollicitudin a imperdiet purus pretium. Ut nec enim vitae massa dictum cursus et et elit.
Bene questo è tutto per il momento, buon lavoro allora!
| Articolo pubblicato 5 anni fa nella categoria 
