Css3 impaginare testo su più colonne

Nel tutorial di oggi dedicato ai css3 vediamo come impaginare il testo su più colonne grazie all’uso della nuova proprietà CSS3 multi-column.

[button link=”http://www.targetweb.it/tutorial/2013/css3-columns/index.html” color=”blue” target=”blank” size=”large”]Demo Base 2 Colonne[/button] [button link=”http://www.targetweb.it/tutorial/2013/css3-columns/index-3colonne.html” color=”blue” target=”blank” size=”large”]Demo 3 Colonne[/button]

Dividere il testo automaticamente in più colonne può sicuramente essere utile a tutti coloro che devono gestire una grossa quantità di informazioni e renderle più leggibili e fluide. Pensiamo ad esempio ai magazine online, guide, o anche semplicemente a un blog particolarmente strutturato. Ben presto nasce l’esigenza di “spezzare” il muro di parole asettico che viene generato dal troppo contenuto. Grazie all’avvento dei css3 possiamo facilmente dividere in più colonne il testo senza dover “inventare” particolari e macchiavellici trucchi per farlo. Vediamo come.

Codice CSS3 per la divisione in due colonne base

Struttura Html

<div class="dueColonne">
   <h2>Due colonne</h2>

   <p>Lorem ipsum dolor sit amet, ... </p>

</div>
<!-- dueColonne-->

Stile CSS

.dueColonne {
    /*Numero di colonne*/
    column-count: 2;
    /* Distanza tra le colonne*/
    column-gap: 30px;
    /*Stile per il bordo delle colonne*/
    column-rule: 1px solid #666;

    /*Amplifica il supporto alle vecchie versioni di Firefox e Chrome/Safari */
    -moz-column-count: 2;
    -moz-column-gap: 30px;
    -moz-column-rule: 1px solid #666;

    -webkit-column-count: 2;
    -webkit-column-gap: 30px;
    -webkit-column-rule: 1px solid #666;

    }

Come avrete notato la sintassi e le regole principali per dividere un testo in colonne è il seguente:

• column-count : imposta il numero di colonne
• column-gap: imposta la spaziatura/distanza tra le colonne
• column-rule: opzionale – Permette di impostare un bordo per le colonne.

Come avrete visto nei commenti la seconda parte di codice è ripetuta aggiungendo i prefissi -moz e -webkit per estendere la funzionalità alle vecchie versioni di Firefox e Chrome/Safari.

Impostare tre colonne con i CSS3

Ecco un esempio completo per impostare il testo su tre colonne (lo troverete nella demo o nel file da scaricare in fondo all’articolo):

Struttura HTML

<div class="treColonne">

      <h2>Tre colonne</h2>

      <p>Lorem ipsum dolor sit amet, ...</p>

</div>
<!-- treColonne-->

Stile CSS

.treColonne{
    padding: 10px;
    background: #f7f7f7;
    border: 1px solid #ececec;

    column-count: 3;
    column-gap: 30px;
    column-rule: 1px solid #d2d2d2;

    -moz-column-count: 3;
    -moz-column-gap: 30px;
    -moz-column-rule: 1px solid #d2d2d2;

    -webkit-column-count: 3;
    -webkit-column-gap: 30px;
    -webkit-column-rule: 1px solid #d2d2d2;

  }

Impostare una larghezza alle colonne

Ovviamente possiamo impostare anche una larghezza per le nostre colonne CSS3 usando l’apposita regola column-width. Ecco un esempio di tre colonne con width di 200px per ogni colonna:

.colonneFisse {
    column-width: 200px;
    column-gap: 30px;

    -moz-column-width: 200px;
    -moz-column-gap: 30px;

    -webkit-column-width: 200px;
    -webkit-column-gap: 30px;
}

NOTA: Se usi la larghezza fissa non impostare il column-count

Conclusioni

[button link=”http://www.targetweb.it/tutorial/2013/css3-columns/index.html” color=”blue” target=”blank” size=”large”]Demo Base 2 Colonne[/button] [button link=”http://www.targetweb.it/tutorial/2013/css3-columns/index-3colonne.html” color=”blue” target=”blank” size=”large”]Demo 3 Colonne[/button]

[viral-download file1=”http://www.targetweb.it/download/2013/css3-columns-targetweb.zip” name1=”Scarica i files!” url=”http://www.targetweb.it/css3-impaginare-testo-su-piu-colonne/” message=”Per scaricare il file completo devi condividere l’articolo su un social network. ” tweet=”#Css3 –  impaginare testo su più colonne” thankyou=”Grazie per aver condiviso, clicca sul link qui sotto:”/]

Cosa ne pensate? Lo userete per i vostri progetti?