Personally I find this to be very inelegant. There is an incredible amount of HTML cruft and Javascript with a bunch of CSS hard-coded into it.<p><a href="http://lab.simurai.com/css/umbrui/" rel="nofollow">http://lab.simurai.com/css/umbrui/</a> has some awesome examples of how this sort of thing should be done, using nothing but native HTML 5 form inputs and CSS.
Looks different between Firefox and Chrome. I'm guessing the way it displays for me is wrong since it looks off for some reason.<p>Looking at the HTML I'm guessing you need javascript to detect it's current state to be able to act on it since it's just a bunch of divs?<p>I've played with similar ideas but going in a completely different direction. I use a checkbox for my toggle and just use CSS to alter the appearance based on that checkbox, no javascript.<p><a href="http://jsfiddle.net/talmand/tb9NZ/" rel="nofollow">http://jsfiddle.net/talmand/tb9NZ/</a><p>Seems to work for me on Firefox and Chrome but not so much IE. It was an experiment so I didn't bother to work out that problem of fallback for IE.
I usually think these "CSS tricks" are neat but I would never use them. This is actually a very nice design and used in the right context could easily add to the UX. Well done!
This is confusing. I'm not sure exactly what I'm selecting. When the shadow is red, the "blue" text is more prominent. When the shadow is blue, the "red" text is more prominent. I'm getting contradictory feedback on what I have selected right now. Or am I missing the point?
For anyone who wants it, here's the fiddle prototype that i came up with before I implement it. <a href="http://jsfiddle.net/colintoh/EyArV/11/" rel="nofollow">http://jsfiddle.net/colintoh/EyArV/11/</a>