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.

In soldoni, ho usato il valore “rotate” della proprietà “transform” per ruotare alcuni tronconi delle tratte metropolitane (che non sono altro che elenchi puntati <ul>) e la maggior parte dei nome delle stazioni, la propietà “content” (utilizzata con le pseudoclassi “:after” e “:before”) per inserire i pallini rappresentanti le varie fermate e le icone abbinate ad alcune stazioni, il font richiamato tramite url per i simboli delle icone (ovviamente ho utilizzato un carattere con licenza libera), la proprietà “border-radius” per creare i cerchi grandi che rappresentano i nodi di interscambio tra più stazioni o i capolinea.
Un riassunto visuale delle proprietà CSS usate lo trovate qui sotto:

Pagina dimostrativa della mappa MM creata con i soli CSS (non funziona con IE fino alla versione 8 a causa del mancato supporto ai CSS3 da parte di questo browser)