verosimile.it

Esperimenti CSS

Cose che potresti fare con i CSS3: la mappa della metropolitana di Milano

Utilizzando alcune delle proprietà Css2 e Css3 implementate dai browser più recenti è possibile trasformare una serie di elenchi puntati in una complessa mappa grafica.

Quello che presento in questo post è un esercizio di stile finalizzato a promuovere alcune proprietà dei CSS3 (e CSS2) gestite dai browser più recenti, non un tutorial da prendere come riferimento. Faccio questa premessa perché il codice che genera la pagina di esempi potrebbe essere ottimizzato e reso più snello.
Il mio intento è dimostrare che, utilizzando alcune banali proprietà tipiche dei CSS3 (“border-radius” e “transform”) altre dei CSS2 implementate da relativamente poco tempo nei browser più evoluti (pseudoclassi “:after” e “:before” abbinate al contenuto generato, proprietà “inline-block”, font inserito via url), oltre, naturalmente, al posizionamento relativo e assoluto, si possa ottenere un effetto grafico molto complesso, che fino a poco tempo fa non ci saremmo mai immaginati di ricavare da un semplice html e CSS, senza immagini.
Mi sto riferendo alla mappa della Metropolitana di Milano, che potete vedere a questo link (qui il pdf originale), a condizione che usiate una release recente di Firefox, Chrome/Safari oppure Opera. Nel caso utilizziate Internet Explorer 8, a causa del suo mancato supporto ai CSS3, non vedreste la pagina correttamente, ma con la prossima versione 9 non dovrebbero esserci problemi.
È una versione semplificata rispetto all’originale, ma solo causa del tempo che ho voluto e potuto investirci, non per impossibilità tecniche.