The Montoya Herald, a weblog about Blueprint, jQuery, design, music and life, publishing on the web since September 2005. Written by Christian Montoya: developer, designer and entrepreneur.

CSS Maze

Posted on December 14, 2005.

I had a crazy idea and I decided to go ahead with it. I wanted to test the power of CSS as a state machine and see if I could use the :hover selector in a unique way.

My idea was to make a maze. This turned out to be a little harder than I expected, but finally, with the help of the adjacent selector "+," z-index, and position:absolute, I was able to make it work.

Please check it out: CSS Maze. I know for sure that it works in Firefox 1.5 and 1.0, and it fails in Opera 8.5 and all versions of Internet Explorer. Please test it, let me know how it works in other browsers, and feel free to share your thoughts. If I have time I'll do other examples too.

Get a trackback link

4 Comments

1. Jeff Ross on December 14, 2005

   Cool! Works just fine with FF 1.0.7 running on OpenBSD. I've had some weird quirks with FF on OpenBSD, but not here.

2. Mike on December 14, 2005

   Have you seen this one? http://www.cssplay.co.uk/menu/amazing.html#nogo

   I have always considered the CSS rules a type of 'state machine' - How is this different from "behavioral" javascript? (Aside from the fact that there seem to be fewer stateful thinkers than procedural thinkers)

3. Richard Brown on December 15, 2005

   Hi Christian
   Tested on a Mac and it works in Camino and also Firefox. Failed in Safari though. The first box is on display but after that nothing.
   If I can do anything else just ask.
   Rich

4. C Montoya on December 15, 2005

   Thanks for the feedback everyone. I think it's safe to say that the maze works only in Gecko based browsers and Opera 9.

   The maze from CSS Play is really cool, but one key difference I noticed is that in mine, you can't cheat. I went through a lot of trouble to make sure of that