CSS  »  Articoli  »  Effetti con CSS 

Questa è la traduzione dell'articolo Pure Css Line Graph di Alen Grakalic pubblicato originariamente su CSS Globe l'11 Febbraio 2009. La traduzione viene qui presentata con il consenso dell'editore e dell'autore.

Penso spesso a modi per visualizzare dati usando solo i CSS. Tempo fa ho scritto un articolo su questo argomento (traduzione) e una cosa che recentemente mi ha intrigato è stata una soluzione per creare dei grafici a linee usando, appunto, solo i CSS. Molti non vedranno alcun reale vantaggio in questa tecnica, specialmente perché esistono molte soluzioni per i grafici basate su Javascript (ma anche Flash).

La mia intenzione non è solo quella di rendere possibile la visualizzazione di dati per quelle persone che non intendono affidarsi ai vari linguaggi di scripting, ma anche di dimostrare la potenza dei CSS e presentare un modo di usarli in maniera diversa rispetto al solito. Se non siete appassionati dei grafici a linee e della visualizzazione di dati in generale, potrete comunque leggere questo articolo come un esperimento sull'uso dei CSS e forse imparare qualcosa sull'uso degli sprites e del posizionamento.

Per iniziare, ecco un'immagine del risultato finale:

Figura 1 - Grafico

Ed ecco la demo. Potete anche scaricare il pacchetto zip con gli esempi.

Dunque, si parla di grafici a linee. A cosa servono? Farò solo un esempio e lascerò le altre considerazioni su vantaggi e svantaggi al vostro discernimento: gli utenti fanno una scansione dei blocchi di una pagina, non leggono ogni parola o numero che in essa siano presenti. I grafici a linee consentono di trasmettere certe informazioni in maniera più efficace di una tabella riempita con numeri.

Come funziona?

La tecnica si basa su HTML strutturato, rimpiazza il testo con immagini e, usando gli sprites CSS e il posizionamento assoluto, crea la simulazione di un grafico a linee. Come nel mio esempio dei grafici ottenuti con i soli CSS, userò liste di definizione (dl). Le liste di definizione vengono trattate con gli stili per rappresentare il sistema di coordinate in cui inseriamo i nostri item. Per questa ragione, gli elementi dl vuoti devono apparire più o meno così:

Figura 2 - Sfondo del grafico

Altri articoli

Altre guide

Altre newsletter