Creare Line Graphs con i CSS
Venerdì 13 Febbraio 2009 - 08:21
di Riccardo Degni
Il nuovo articolo di Alen Grakalic apparso su CSSGlobe.com denominato Pure CSS Line Graph, ha notevolmente catturato la mia attenzione, essendo uno dei pochi post che si pongono l’ obiettivo di mostrare tutta la potenza offerta dai semplici CSS.
Dopo il precedente articolo (Pure CSS Data Chart) che spiegava come creare “semplici” grafici unicamente avvalendosi dei fogli di stile, Alen ha voluto spingersi ad un livello superiore: creare Line Graphs.
Per quanto complicata possa sembrare, la tecnica presentata si basa principalmente su pochi elementi HTML (dl, dd, span), classi CSS ed un’immagine che permette di simulare la creazione delle varie linee.
Oltre alle corpose spiegazioni, nell’articolo sono presenti molte immagini che mostrano i risultati in azione e soprattutto i file sorgenti degli esempi presentati.
Molto probabilmente questa tecnica verrà ignorata dalla maggior parte degli sviluppatori, dato che esistono controparti in Javascript e simili che offrono maggiore controllo e soprattutto maggiore rapidità in fase di creazione (senza contare che ancora non sono a conoscenza di quanto ampia sia la browser compatibility della tecnica in questione). Tuttavia, come nel caso di una mia vecchia segnalazione contenente un link ad una risorsa che mostrava come creare Homer Simpson con i CSS, è importante notare come con l’uso dei semplici CSS sia possibile raggiungere risultati davvero notevoli.
Commenti
1
Interessante, un mix di tecniche già conosciute che portano ad un bel risultato. Il punto è: serve veramente?
Ho visto anche la creazione di homer interamente fatta con lettere (impressionante! vedi homer css) ma tutte queste cose non vanno oltre il valore dimostrativo secondo me.
Prendi l’esempio dell’immagine di Homer, molto probabilmente con testo e css il rendering ed il caricamento del css risulta + lento che con una immagine… perciò ritengo che non saranno mai realmente adoperate queste tecniche.
Però faccio i miei complimenti a chi riesce a spingere fino a questi livelli l’utilizzo di CSS.
2
Molte di queste tecniche è vero che non verranno mai usate praticamente, ma hanno diversi vantaggi.
In quanto esercizi di stile migliorano la conoscenza dei CSS in chi li pratica.
Inoltre permettono di fare il punto con i CSS.Poi, sperimentando, può sempre capitare che esca fuori qualcosa di nuovo ed utile.