5 ms·

CSS3 Flip Switch

21 points by p0larboy 15y ago

redguava 15y 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!
mmilo 15y 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/ 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 15y 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.
  - mmilo 15y 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 15y 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.
- p0larboy 15y ago
  I totally agree simurai examples is so much better. no arguments there.
notahippy 15y ago
cursor: pointer; anyone?
- p0larboy 15y ago
  fixed~!
secoif 15y ago
Cool, but doesn't work particularly well on iPhone.
- p0larboy 15y ago
  browser version? I tested on iOS5 and it did look worse.
  - secoif 15y ago
    Whatever is the latest on iPhone 4.
- fceccon 15y ago
  I'm on iOS 5 and it works, the border doesn't look crisp though.
  - p0larboy 15y ago
    i thought i had it fixed with background-clip but it still haunts me..
recursive 15y 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 15y 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.
- p0larboy 15y ago
  I might need to re-learn the meaning of flip switch. My bad.
talmand 15y 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/ 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 15y ago
  Pretty sure CSS 3D transforms aren’t available yet in Firefox (at least in non-alpha versions).
  - talmand 15y ago
    3D transforms? I'm curious, what are you referring to?
  - mcpherrinm 15y ago
    The latest release, Firefox 10, has 3D transforms. (I think -- I only have the nightly installed, which certainly does).
    - jacobolus 15y ago
      Excuse me, you are right. In my defense, FF10 isn’t quite a week old.
- p0larboy 15y 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~!
p0larboy 15y 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/ http://jsfiddle.net/colintoh/EyArV/11/

21 points by p0larboy 15y 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!

mmilo 15y 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/ 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 15y 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.
- mmilo 15y 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 15y 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.
p0larboy 15y ago
I totally agree simurai examples is so much better. no arguments there.

notahippy 15y ago

cursor: pointer; anyone?

p0larboy 15y ago
fixed~!

secoif 15y ago

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

p0larboy 15y ago
browser version? I tested on iOS5 and it did look worse.
- secoif 15y ago
  Whatever is the latest on iPhone 4.
fceccon 15y ago
I'm on iOS 5 and it works, the border doesn't look crisp though.
- p0larboy 15y ago
  i thought i had it fixed with background-clip but it still haunts me..

recursive 15y 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 15y 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.
p0larboy 15y ago
I might need to re-learn the meaning of flip switch. My bad.

talmand 15y 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/ 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 15y ago
Pretty sure CSS 3D transforms aren’t available yet in Firefox (at least in non-alpha versions).
- talmand 15y ago
  3D transforms? I'm curious, what are you referring to?
- mcpherrinm 15y ago
  The latest release, Firefox 10, has 3D transforms. (I think -- I only have the nightly installed, which certainly does).
  - jacobolus 15y ago
    Excuse me, you are right. In my defense, FF10 isn’t quite a week old.
p0larboy 15y 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~!

p0larboy 15y 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/ http://jsfiddle.net/colintoh/EyArV/11/