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. :)
Muito interessante mesmo! Ainda passei algum tempo a inspeccionar elementos :)
ResponderEliminar