Dividere un articolo in colonne in una pagina web

Sul sito Ehabitat.it ho trovato gli articoli impaginati in due colonne, come su giornali e riviste. Forse sul web la soluzione è un po’ scomoda per chi legge, perché dopo avere scorso la pagina fino giù bisogna tornare in alto per leggere la seconda colonna dall’inizio. Però l’effetto è interessante. Come l’hanno ottenuto?

In realtà è semplicissimo: basta impostare l’apposito parametro nei Css.

La proprietà si chiama column-count e va impostata col numero di colonne in cui si vuole dividere il testo. A questo bisogna aggiungere il parametro column-gap, che invece va impostato con il valore in pixel dello spazio vuoto che separa le due colonne. Si può aggiungere una linea verticale con la proprietà column-rule, che prende tre parametri: lo spessore in pixel, lo stile e il colore.

Sul sito w3schools c’è l’elenco di tutti gli stili di linea possibili. Il parametro è necessario; per ottenere una linea normale bisogna scrivere “solid”. Altre opzioni possono essere “dotted” (a puntini), “dashed” (a lineette), “double” (due linee affiancate), oltre a varie possibilità di effetti 3d, che dipendono dai colori impostati.