CSS3 lightswitch

Creating a CSS3 lightswitch (that works!) has been interesting.

I was already familiar with -moz-linear-gradient(), so creating the switch in Firefox took only a little while. But I swear the Webkit property -webkit-gradient() was made with its foremost purpose being to confuse people and complicate things more than necessary. But never mind all that – it’s done!

I tweaked the color a bit to try to imitate shadow and light a little better. The shadow also changes with the switch, depending on its position. All the coloring is completely percentage-based, so you can duplicate the same thing with any size “switch.” (Well, should be able to. Webkit is crazy. So crazy.)

4 responses

  1. No article there. I am guessing that you refer to the pseudo-elements and pseudo-classes in CSS3, ya?

  2. Hooray CSS3!

  3. Ok, I get it. It’s the jquery lightswitch plugin, yes?

  4. That’s actually pretty cool.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.