Cast your mind back through to mists of time to January 2001 — reality TV is hip and fresh, ‘Dubya’ is unpacking boxes in the Oval Office and Tantek Celik — he of box model hack fame — first introduces the idea of using the interaction of CSS borders to create diagonal lines without the need for graphics . His ‘A Study of Regular Polygons’ demonstrated that by varying the thickness of CSS borders properties it was possible to create simple geometric shapes.
I clearly remember being quite gobsmacked by this idea at the time, but it also seemed a bit too obscure to be truly useful in everyday web development. Admittedly, a few developers managed to tease logos (Kevin did the SitePoint logo in a Tech Times edition) and simple diagrams out of a brittle tangle of DIVs, but in general it was all more about bloodymindedness than utility.
It’s taken five and a half years, but our own James Edwards (co-author of ‘The JavaScript Anthology’) has actually come up with a practical application of the technique. Using nothing more than Tantek’s idea, some JavaScript and some serious math noodling, James has constructed a working dynamic 3D rendering engine. The engine takes simple 2D plans and turns them into a shaded 3D world that the user can freely navigate through. Amazing stuff.
I should make it clear that, like Tantek’s original demo, at this stage it is an exploration of what’s possible, rather than a viable application. You would expect this kind application would fall into dynamic SVG in the near future.
Still, with fond memories of Wolfenstein 3D flooding back, I have to admit the idea of one day stalking my way through a Nazi stronghold built of CSS bricks has a certain appeal.
If you liked this blog, share the love:
August 9th, 2006 at 1:41 pm
wow, totally cool
August 9th, 2006 at 2:43 pm
Amazing. Maybe in the near future the ability to make 3D games in this fashion would replace the need for Flash. It would be lighter to load and no need for plugins. Particulary when SVG is standard and well used.
August 9th, 2006 at 2:45 pm
wow, that’s amazing. A little worrying though — what if a future client sees this and asks for one? That’s not a route I want to go down…. ;)
August 9th, 2006 at 9:04 pm
Cool =)
August 9th, 2006 at 9:42 pm
I was looking at something very similar to this not long ago. JS shoot-em-ups.
August 9th, 2006 at 10:32 pm
yawn. wake me up when it can do any of this
lol at mcreal, there’s always a anti-flash troll that wants to do everything flash did years ago but can’t allow himself to accept its superiority in these type of applications it cos the slashdot collective mindset tells him not to.
August 9th, 2006 at 10:33 pm
I’ve seen a platform game totally coded with js, very cool.
August 9th, 2006 at 11:14 pm
Well about 6 months ago I cam up with Doing graphs withs CSS and javascript worked quite well.
August 10th, 2006 at 12:47 am
Honestly, I would have to imagine that Flash would actually load quicker than the huge amount of scary CSS and (X)HTML (and JavaScript) would in this instance — if we’re talking about making them look exactly the same…mostly because SWF are, I suppose, some sort of compilation as opposed to run-time rendering in the form of text. Obviously there are always dependencies that can differ tests in this instance, but as a proof of concept I think this is pretty cool!
August 10th, 2006 at 4:49 am
While this is an incredibly interesting use of JavaScript and CSS, it certainly falls into the realm of “just because you can, doesn’t mean you should.” :)
August 10th, 2006 at 6:31 am
Do I dare test it in IE? ;)
August 10th, 2006 at 10:18 am
@Anonymous. Got nothing wrong with flash. I just enjoy seeing things do what they weren’t intended to do. ;)
August 10th, 2006 at 11:00 am
@Adam, I haven’t tested it in IE, but it relies on the browser being able to render transparent borders, which IE can’t.
This is, as I said, an experiment, and the nature of experimentation is you often can’t possibly see the final commercial application of what you’re playing with until you’ve done it. 3M were trying to invent superglue when they came up with a glue so crappy it wasn’t able to bond two pieces of paper together — hello post-it notes!
Flash would be obviously still be the way to build this kind of app in 2006, but who knows how this might feed into future layout techniques or dynamic SVG or who-knows what else.
@Simon Proctor - Nice work on the graphs! I’m interested to know. Did it take a lot of tweaking to get the lines to line up, or would it be relatively trivial to change the graph data and alter the graph?
August 10th, 2006 at 7:34 pm
It was a while ago when I wrote it but the idea is it takes any list where each item has been split into a name value pair using spans and draws the graph. All the code is on the page so you can download it, change the numbers and it draws the new graph.
I have the horrible tendancy to play about with an idea for a while and then get bored, never document it and go off and do something else.
(Simon “I’ve just joined the forums” Proctor)
August 11th, 2006 at 10:24 am
Hey Simon. Very cool. I’d been considering doing the same sort of thing with bar graphs, but line graphs in a whole new level. Nice.
August 12th, 2006 at 2:38 am
3D Welten mit CSS und DOM
Im Sitepoint-Blog ist ein lustiger Artikel, wie man mittels CSS und DOM 3D-Welten rendert
Das muss ich mir demnächst mal genauer ansehen.
…
August 14th, 2006 at 11:08 am
Be cuter if it worked in realtime and ‘turned’ corners - like the one I’ve been playing with for a few months now…
http://battletech.hopto.org/mechproject/game.html
Which I’ve been playing with the idea of replacing the building ‘image’ with SVG.
March 13th, 2007 at 11:06 am
hello, that was all cool. I was just wandering though if any of you can help me. I hope this will be right place to ask. I am looking for a quick and easy way to fix a onmauseover effect on the main tab button of my site. It works in FF but not in IE. Thanks in advance!
http://manyinfos.com/
March 13th, 2007 at 1:44 pm
Not really anything to do with this post. Try the css forums —
http://www.sitepoint.com/forums/forumdisplay.php?f=53
(But I will say this: you can’t wrap a link around list tags like you’ve done — i.e. <a><li>example</li></a>)