I CSS, per loro stessa definizione, sono un linguaggio che permette di controllare la presentazione di una pagina web. In tal senso i fogli di stile possono essere utilizzati anche per realizzare effetti puramente grafici. In questo articolo vedremo come realizzare un istogramma con i soli CSS, ricordando al contempo che si tratta unicamente di un layout dimostrativo.
Partiamo da una semplice struttura HTML:
<div id="grafico">
<p id="ay">y</p>
<div id="contenitore">
<p class="barra"><span id="b1"></span></p>
<p class="barra"><span id="b2"></span></p>
<p class="barra"><span id="b3"></span></p>
<p class="barra"><span id="b4"></span></p>
<p class="barra"><span id="b5"></span></p>
<p class="barra"><span id="b6"></span></p>
</div>
<p id="ax">x</p>
</div>
Come si evince dal precedente codice, gli unici contenuti realmente inseriti saranno i nomi dei due assi cartesiani. L'istogramma vero e proprio verrà generato dalla formattazione che segue:
#grafico {
width: 60%;
height: 300px;
margin: 0;
padding: 0;
}
#ay {
width: 1em;
float: left;
font-weight: bold;
margin: 0;
}
#contenitore {
float: left;
width: 90%;
margin: 0;
height: 300px;
border-left: 1px solid #000;
border-bottom: 1px solid #000;
}
.barra {
float: left;
width: 10%;
height: 300px;
margin: 0 0 0 0.5em;
display: inline;
background: #ccc;
color: #000;
}
#b1, #b2, #b3, #b4, #b5, #b6 {
margin: 0;
display: block;
width: 100%;
background: #fff;
color: #000;
}
#b1 {height: 5px;}
#b2 {height: 20px;}
#b3 {height: 35px;}
#b4 {height: 40px;}
#b5 {height: 55px;}
#b6 {height: 70px;}
#ax {
margin: 0;
text-align: right;
font-weight: bold;
clear: both;
width: 90%;
}
Abbiamo usato la proprietà
float per allineare orizzontalmente gli elementi. Si noti come tutti gli elementi del grafico abbiamo
un'altezza dichiarata di 300px. Dichiarare un'altezza per un contenitore di elementi flottati ci permette di mantenere
tali elementi al suo interno. La dichiarazione display: inline data per la classe .barra impedisce
ad Internet Explorer 6 (ed inferiori) di raddoppiare erroneamente il margine orizzontale corrispondente alla direzione
di floating. Per realizzare l'effetto grafico della diversa altezza delle barre abbiamo inserito un elemento span
in ciascuna barra assegnandogli i seguenti stili:
#b1, #b2, #b3, #b4, #b5, #b6 {
margin: 0;
display: block;
width: 100%;
background: #fff;
color: #000;
}
#b1 {height: 5px;}
#b2 {height: 20px;}
#b3 {height: 35px;}
#b4 {height: 40px;}
#b5 {height: 55px;}
#b6 {height: 70px;}
Il colore di sfondo di tali elementi vuoti coincide con quello della finestra di visualizzazione. L'altezza incrementale degli
elementi crea l'effetto voluto, effetto che non si sarebbe potuto ottenere se avessimo usato i bordi superiori degli elementi
con classe .barra, in quanto questi ultimi avrebbero superato l'altezza complessiva del contenitore (300px).
Potete visionare l'esempio finale in questa pagina.