Corsi on-line

Impaginazione su due colonne con CSS3

L’impaginazione dei contenuti su due o più colonne rende più semplice la fruizione delle pagine Web incrementandone il livello di leggibilità, infatti, grazie a questo tipo di impostazione sarà possibile evitare o limitare al minimo necessario il ricorso allo scrolling per l’accesso a quegli elementi che eccedono lo spazio messo a disposizione dall’area di visualizzazione. Un soluzione rapida per l’incolonnamento viene messa a disposizione da CSS3.

Le regole di stile presentate nell’esempio proposto di seguito sono basate in pratica sull’adozione di tre proprietà appositamente dedicate alla stilizzazione delle colonne; esse sono nell’ordine:

  • column-count: permette di definire il numero di colonne desiderato;
  • column-gap: stabilisce la distanza tra le colonne;
  • column-rule: consente di definire le caratteristiche del bordo delle colonne.

Come si noterà, il codice prevede anche la creazione di un contenitore (nel nostro caso una dixbox), opzionale, all’interno del quale inserire il contenuto incolonnato:

body {font-family:Arial,Helvetica,sans;}

#box{margin: 0 auto; width:80%; height:80%;min-width:80%;min-height:80%; text-align: justify;}

.incolonnamento {
padding: 20px;
column-count: 2;
column-gap: 20px;
column-rule: 1px dashed #ccc;

-moz-column-count: 2;
-moz-column-gap: 20px;
-moz-column-rule: 1px dashed #ccc;

-webkit-column-count: 2;
-webkit-column-gap: 20px;
-webkit-column-rule: 1px dashed #ccc;
}

Le proprietà utilizzate non vengono supportate nello stesso modo da tutti i browser e dalle diverse versioni di questi ultimi, ecco il motivo della presenza di prefissi come -moz- per applicazioni come Firefox e -webkit- per software basati su tale rendering engine (Safari) o fork come Blink (Google Chrome). Applicando le regole definite in questo modo:

<div id="box">
<div class="incolonnamento">
<h1>Lorem Ipsum</h1>
<p>Suspendisse at euismod odio, id fringilla lectus. Pellentesque eros risus, vestibulum nec velit sed, porta interdum nunc. Nunc eleifend mauris sit amet elit sollicitudin hendrerit. In non nunc nisi. Sed laoreet mattis auctor. Cras at rutrum magna. Praesent in ullamcorper metus [..]<p>
</div>
</div>

si dovrebbe ottenere un risultato come il seguente:

incolonnamento

La proprietà column-count potrà essere valorizzata anche in altro modo, per esempio con l’intento di ottenere un incolonnamento triplo, naturalmente qualsiasi variazione apportata dovrà essere eseguita con lo scopo di rendere i contenuti ancora più leggibili.

Post correlati
I più letti del mese
Tematiche