Mapa do Metro Londrino Recriado em CSS

O mapa do metro Londrino é um exemplo de design que é reconhecido internacionalmente, e que tem servido de inspiração para muitos outros mapas por todo o mundo. Um web developer lembrou-se de ver até que ponto é que as modernas capacidades do CSS permitiram recriar este mapa... sem usar nenhuma imagem. E o resultado foi este mapa do metro Londrino feito totalmente em CSS.

O CSS é um sistema que permite aplicar diferentes estilos visuais a um documento HTML, que numa forma básica permitiria que facilmente mudassem a cor e tamanho de todos os títulos ou links apresentados numa página web; mas que pode ir muito para além disso - como se pode ver neste exemplo.

Na sua base, cada linha de metro que é apresentada no mapa consiste numa simples lista HTML das estações, que de forma convencional (sem a aplicação do CSS) seria apresentada como:

• estação 1
• estação 2
• estação 3
• ...

(Algo que poderão confirmar caso espreitem o código fonte HTML da página.)

Acho que nunca mais poderemos dizer que é impossível fazer o que quer que seja em HTML e CSS. :)