

CSS3 Flip Switch - p0larboy
http://colintoh.com/css3-flip-switch

======
mmilo
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.

<http://lab.simurai.com/css/umbrui/> has some awesome examples of how this
sort of thing should be done, using nothing but native HTML 5 form inputs and
CSS.

~~~
mp3geek
"Note that other browsers also allow Shadow DOM styling, but to keep things a
little simpler, it's just WebKit for now"

Thats such a cop-out.

~~~
mmilo
Even if it only worked in webkit I'd still style native elements and let them
fall back to their default look. Creating fake inputs using a bunch of nested
divs gives me flashbacks of days when tables were used for layout.

------
talmand
Looks different between Firefox and Chrome. I'm guessing the way it displays
for me is wrong since it looks off for some reason.

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?

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.

<http://jsfiddle.net/talmand/tb9NZ/>

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.

~~~
jacobolus
Pretty sure CSS 3D transforms aren’t available yet in Firefox (at least in
non-alpha versions).

~~~
mcpherrinm
The latest release, Firefox 10, has 3D transforms. (I think -- I only have the
nightly installed, which certainly does).

~~~
jacobolus
Excuse me, you are right. In my defense, FF10 isn’t quite a week old.

------
redguava
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!

------
recursive
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?

~~~
pedalpete
You are partially right, but if the label was on/off, I'm sure you would have
no issues. The designer should have chosen colors better, but the general
function is nice.

------
p0larboy
For anyone who wants it, here's the fiddle prototype that i came up with
before I implement it. <http://jsfiddle.net/colintoh/EyArV/11/>

------
secoif
Cool, but doesn't work particularly well on iPhone.

~~~
fceccon
I'm on iOS 5 and it works, the border doesn't look crisp though.

~~~
p0larboy
i thought i had it fixed with background-clip but it still haunts me..

------
notahippy
cursor: pointer; anyone?

~~~
p0larboy
fixed~!

