Dividere il testo in colonne multiple in stile magazine con CSS3

 

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:

… 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.

Risultato:

Column Count
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:

Risultato:

Column Width
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.

Risultato:

Column Gap
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:

Risultato:

Column Rule
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!

pixolo ads
Cambia Copertina
3216 | Articolo pubblicato 4 anni fa nella categoria Css - Html.
Puoi seguire tutti i nuovi articoli e gli aggiornamenti di Pixolo.it attraverso i Pixolo feeds feed RSS.
Puoi inoltre lasciare un commento, oppure fare un trackback dell'articolo dal tuo sito.
1
SHARES
Be Sociable,
share and enjoy!
Resta aggiornato!
Segui Pixolo anche su Facebook!
Don't show more - I am already fan
×
Salva il post su Facebook
What is a Facebook Save Button?

The save button lets you save the current page to your private list on Facebook for a future use or consultation.
info | close
×