CSS3 Flip Switch | Hacker News Reader

CSS3 Flip Switch

colintoh.com

21 pointsp0larboy24 comments

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.

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

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.

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

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

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.

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

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.

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

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

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

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

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?

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.

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

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/

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

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

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

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

Whatever is the latest on iPhone 4.

cursor: pointer; anyone?

fixed~!

Reply on news.ycombinator.com