CSS  »  Articoli  »  Effetti con CSS 

Questa è la traduzione dell'articolo Pure Css Data Chart di Alen Grakalic pubblicato originariamente su CSS Globe il 2 Febbraio 2008. La traduzione viene qui presentata con il consenso dell'editore e dell'autore.

La visualizzazione di dati sul web è quasi sempre ottenuta con applicazioni Flash o con l'ausilio di qualche linguaggio di programmazione. Queste soluzioni sono le uniche per semplici grafici? Perché non provare a realizzare il tutto usando solo CSS? Per iniziare ecco la demo e il file zip da scaricare.

L'approccio

In questo esempio non userò Javascript o linguaggi server side. Farò leva solo ed esclusivamente su markup HTML e CSS.

L'obiettivo è quello di presentare dei semplici grafici con dati. Potremmo dire che un grafico è un oggetto a due dimensioni. Così, la migliore soluzione a livello semantico e strutturale è una lista di definizione. Perché? Beh, per iniziare si tratta di una lista di item. Sebbene una lista sia lineare, possiamo intendere i titoli di una lista di definizione (gli elementi dt) come gli item sull'asse delle x e le descrizioni delle definizioni (gli elementi dd) come i valori sull'asse delle y.

Se tutto ciò non ha molto senso a causa delle mie povere capacità di spiegazione :), diciamo che vorremmo trasformare qualcosa del genere

Figura 1 - Schema di base del grafico

in questo

Figura 2 - Grafico formatatto con i CSS

solo con i CSS.

Altri articoli

Altre guide

Altre newsletter