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.)

[CodePen height=300 show=result href=vonqb user=peiche]
Husband. Daddy. Programmer. Artist. I'm not an expert, I just play one in real life.
  • No article there. I am guessing that you refer to the pseudo-elements and pseudo-classes in CSS3, ya?

  • Hooray CSS3!

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

  • That’s actually pretty cool.