CSS3 Flip Switch

by p0larboy • 14 years ago

21 24 14 years ago

redguava• 14 years ago

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!

mmilo2• 14 years ago

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• 14 years ago

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

mmilo2• 14 years ago

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.

masklinn• 14 years ago

> Thats such a cop-out.

Is it really? It's an experiment (that's written on the page), it notes this can be achieved in other browsers but the author just wanted the experiment/demo out, and all the caveats are written up-front.

p0larboy7• 14 years ago

I totally agree simurai examples is so much better. no arguments there.

notahippy• 14 years ago

cursor: pointer; anyone?

p0larboy7• 14 years ago

fixed~!

secoif2• 14 years ago

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

p0larboy7• 14 years ago

browser version? I tested on iOS5 and it did look worse.

secoif2• 14 years ago

Whatever is the latest on iPhone 4.

fceccon• 14 years ago

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

p0larboy7• 14 years ago

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

recursive• 14 years ago

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• 14 years ago

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.

p0larboy7• 14 years ago

I might need to re-learn the meaning of flip switch. My bad.

talmand3• 14 years ago

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.

jacobolus2• 14 years ago

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

talmand3• 14 years ago

3D transforms? I'm curious, what are you referring to?

mcpherrinm• 14 years ago

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

p0larboy7• 14 years ago

It chanced upon me that i should have used input after I had completed the styling for the flip switch. Since I was already halfway there, I just went ahead with the javascript binding.

If I'm not wrong, firefox support for css perspective is lacking hence the flip switch looks flatter in firefox.

Saw your fiddle example. Awesome stuff~!

talmand3• 14 years ago

Oh believe me, I understand the need to get something to the done part once you've fiddled with it for a while. If anything, it's a good start on something that could be expanded into "useful" state. That is, once enough browsers catch up to the CSS3 requirement.

Thanks for the compliment. I'm actually going to be giving a Meetup presentation later this month in the Dallas area on this topic, that's why I was quick on the reply.

Here's more fiddle stuff if you're interested:

http://jsfiddle.net/user/talmand/

I have several examples of using the checkbox in that manner.

p0larboy7• 14 years ago

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/

CSS3 Flip Switch

Related Stories