Carte du Tube en pur HTML et CSS

Le par  |  3 commentaire(s)
CSS-Tube-Map

HTML5, CSS3 et un soupçon de jQuery. La recette du développeur John Galantini pour recréer une carte du métro londonien.

Pour les amoureux des technologies Web, le développeur britannique John Galantini - qui se présente également comme un artiste CSS - a mis en ligne son projet CSS Tube Map. L'occasion pour lui de donner matière à inspiration pour une "utilisation créative de CSS " et mettre en valeur tout son potentiel.

CSS Tube Map recréé la carte du métro londonien que l'on nomme également Tube ou Underground. Pour cela, le développeur a eu recours à HTML5, CSS3 et un " petit peu de jQuery ". Contrairement à ce que l'on pourrait croire, il n'y a pas d'images. Même les symboles ont été conçus avec HTML et CSS.

CSS-Tube-Map

Ce projet a demandé au développeur aux alentours de 120 heures de travail... C'est sûr qu'il y avait plus simple avec l'aide d'images, d'autant que SVG fait aussi partie de HTML5.

Outre la promotion des technologies Web, John Galanti a voulu rendre hommage à sa manière au métro de Londres. Le plus vieux du monde du haut de ses 150 ans.

L'œuvre est disponible sur cette page.

Complément d'information

Vos commentaires

Gagnez chaque mois un abonnement Premium avec GNT : Inscrivez-vous !
Trier par : date / pertinence
Le #1325632
Si je joue avec le zoom de chrome l'affichage bug.

J'ai l'impression, mais peut être que je me trompe, que l'on peut faire des choses infiniment plus riche visuellement en SVG, un exemple http://openclipart.org/people/remi_inconnu/remi_inconnu_Watch_1.svg
Le #1325852
Non, je ne suis pas très au fait du développement web, en particulier depuis HTML5, mais le résultat ne me parait ni très intéressant, ni très impressionnant.

En plus l'article est assez trompeur. Dire qu'il "n'y a pas d'images" est totalement absurde puisqu'on en voit. les images en question ne sont pas des images prédéfinies type gif ou png mais des images générées dynamiquement en vectoriel avec la technologie SVG. Tout comme les tracés du métro.

En tout cas je ne vois pas grand chose de très innovant là-dedans.
Le #1325862
Idem sous Chromium
Suivre les commentaires
Poster un commentaire
Anonyme
:) ;) :D ^^ 8) :| :lol: :p :-/ :o :w00t: :roll: :( :cry: :facepalm:
:andy: :annoyed: :bandit: :alien: :ninja: :agent: :doh: :@ :sick: :kiss: :love: :sleep: :whistle: =]