Transportation via CSS3
June 13, 2013 3:19 PM Subscribe
CSS Tube Map, a re-creation of the iconic map of London Underground routes, rendered entirely with HTML5 and CSS3*.
If you'd like a more compact** means of getting around, here is a CSS TARDIS.
Or if you'd just like to forego the CSS in favor of something more solid, here's a Tube Map made of Lego on display at several stations.
* "for use with webkit browsers, such as Chrome and Safari - Firefox is also supported", sorry IE
**at least on the outside... but the outside is all that it shows
If you'd like a more compact** means of getting around, here is a CSS TARDIS.
Or if you'd just like to forego the CSS in favor of something more solid, here's a Tube Map made of Lego on display at several stations.
* "for use with webkit browsers, such as Chrome and Safari - Firefox is also supported", sorry IE
**at least on the outside... but the outside is all that it shows
As far as these things go, from looking at the source, this appears to have been fairly tedious to assemble. It's just a whole ton of absolutely-positioned block elements. I'm not saying that this wasn't a cool exercise, but SVG was more or less designed explicitly to accomodate this sort of thing a whole lot more elegantly. You can even use CSS to style your SVG elements!
posted by schmod at 3:40 PM on June 13, 2013 [7 favorites]
posted by schmod at 3:40 PM on June 13, 2013 [7 favorites]
Ha! I just posted on Twitter about the trend of tube map recreations using nerdy things. I wonder where that meme came from.
That CSS TARDIS is fucking great.
posted by brundlefly at 3:44 PM on June 13, 2013 [1 favorite]
That CSS TARDIS is fucking great.
posted by brundlefly at 3:44 PM on June 13, 2013 [1 favorite]
What's the best platform for making love and listening to Death From Above?
posted by Charlemagne In Sweatpants at 4:13 PM on June 13, 2013 [1 favorite]
posted by Charlemagne In Sweatpants at 4:13 PM on June 13, 2013 [1 favorite]
Apparently me and my Linux computer live in E-Space, because the Tardis doesn't render correctly here.
posted by jiawen at 4:17 PM on June 13, 2013
posted by jiawen at 4:17 PM on June 13, 2013
That TARDIS is pretty slick. Just don't do a couple strokes of cmd - to reduce the text size. TARDIS falls apart if you do. CSS is such a fragile thing, sometimes.
posted by Thorzdad at 4:29 PM on June 13, 2013
posted by Thorzdad at 4:29 PM on June 13, 2013
It reminds me a little bit of a thought experiment that Christopher Schmitt did a couple of years ago: A US flag done in CSS.
Again, styled list items. The list item is the atom of the CSS universe.
posted by fifteen schnitzengruben is my limit at 4:33 PM on June 13, 2013 [1 favorite]
Again, styled list items. The list item is the atom of the CSS universe.
posted by fifteen schnitzengruben is my limit at 4:33 PM on June 13, 2013 [1 favorite]
As noted in the Lego link, they're celebrating the 150th anniversary of 'The Tube' so expect more nerdy tube maps to come...
posted by oneswellfoop at 4:43 PM on June 13, 2013
posted by oneswellfoop at 4:43 PM on June 13, 2013
omg I'm drooling!!!
posted by supermedusa at 4:56 PM on June 13, 2013
posted by supermedusa at 4:56 PM on June 13, 2013
I misread the title and momentarily thought Lovefoxxx was going to be the new companion.
As you were.
posted by pxe2000 at 5:27 PM on June 13, 2013 [2 favorites]
As you were.
posted by pxe2000 at 5:27 PM on June 13, 2013 [2 favorites]
YOu and me both.
posted by Charlemagne In Sweatpants at 5:31 PM on June 13, 2013
posted by Charlemagne In Sweatpants at 5:31 PM on June 13, 2013
But can you render The Master's TARDIS from the same HTML elements simply by providing an alternate CSS stylesheet? Because otherwise this seems to break the whole separation of content from presentation.
I kid, but it always annoys me when a CSS layout requires a ton of completely non-semantic HTML to make it work. What are you going to do with all those empty list items?
posted by RonButNotStupid at 5:48 PM on June 13, 2013 [3 favorites]
I kid, but it always annoys me when a CSS layout requires a ton of completely non-semantic HTML to make it work. What are you going to do with all those empty list items?
posted by RonButNotStupid at 5:48 PM on June 13, 2013 [3 favorites]
SVG was more or less designed explicitly to accomodate this sort of thing a whole lot more elegantly
You could assemble this page from a JSON data source in either SVG or CSS/divs with just about the same amount of work using d3.js.
posted by Nelson at 8:25 PM on June 13, 2013
You could assemble this page from a JSON data source in either SVG or CSS/divs with just about the same amount of work using d3.js.
posted by Nelson at 8:25 PM on June 13, 2013
What font is that? With the funky "L"s? I can't figure it out poking through the CSS.
posted by sidereal at 12:50 AM on June 14, 2013
posted by sidereal at 12:50 AM on June 14, 2013
Chrome Developer Tools (computed styles) identifies it as "london_tubenormal". Here's the font in four formats from the site. The TTF is probably reusable, although I have no idea about licensing.
posted by Nelson at 8:39 AM on June 14, 2013
posted by Nelson at 8:39 AM on June 14, 2013
« Older Ed Balls Teaches Typing | The truth about female desire Newer »
This thread has been archived and is closed to new comments
I wish I could live in a city with a proper subway system.
posted by Cool Papa Bell at 3:33 PM on June 13, 2013 [3 favorites]