A Single Article

Read it, comment, and share it with your friends

CSS Maze

Posted December 14 in Design.

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.

Meta

Useful things

Related Articles

These just might ring a bell

Get a Trackback link

4 Comments

Responses to my article
  1. Jeff Ross 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 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 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 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 :)

Leave a comment

Share your thoughts with the world

You can use Markdown, or you can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>

Please keep comments respectful and on topic.

This form is guarded by Akismet, so don't waste your time trying to submit spam. It won't work. Ever.





Stay on top of new updates at this site: Subscribe to the Feed!