Forum Contest: Toggle Switch

Nice, I'm about to attempt this contest myself as my first one as well! :)

Very beautiful!

Simple, clear, beautiful. The transition is nice and smooth.

Red and green is clear unless one is colour-blind. I think that the vertical positioning (up is on) is enough. More contrast or a symbol (i.e. an X or a square) would muck it up without making it much clearer.

For this code pen, It would be cool if all the sizes were relative to lets say an outer container that could be resized and all elements would be resized based on the container. You could do it with SASS. It's a cool toggle and if things like the fill and outline of the button and slider were changeable that would also be cool. Maybe if I can get some free time I will fork your pen.

Thanks for your replies and thoughts!

Very Nice!

Very nice man, great work!

Super Rad.

Smooth. It is difficult to see the switch, but the LED on or off is clear.

Looking premium man!

Yep, very nice and subtle. the colors and size can easily be changed to customize for use which is a huge plus in this type of contest! I want to play with it some more but I sized and customized it under just a few minutes. http://codepen.io/httpJunkie/pen/EuyHt

Thanks guys! Ya I noticed the dark version was a bit difficult to see. Thats why I decided to add the second switch.

Good job, I thought yours was the best too! Just seems like a lot of thought went into the code.

In my opinion it was also the best one. Congrats!

Red and green is enough contrast for me, but for the colour-blind, this may not be the case. You may want to add a symbol of some sort or switch to a vertical positioning (i.e. up is on, right?).

I just tweeted this tool, nice find!

I'm glad you reposted this so that we could comment; I love this one.

I paused for a second before i realized that the CodePen website wasn't locked to me. This was not what I was expecting. Now jealous that I didn't go outside the box. Very creative; very memorable.

Red and green is clear. Open and closed lock is clear. The transition is really smooth.

I love the rounded button. Nice animation.

I'm not sure if green/red will have enough contrast for colour-blind people, and there is no other means of distinguishing between on and off.

I added some functionality so that it is more clear.

That's fantastic. Love it!

Really smooth though, love it.

Cool!!!

Simple and elegant. Clear. Well executed animation.

Very cool!

Great animation!!! Without knowing about this contest, it wasn't obvious that this was a switch. However, if is a creative use of a switch, and everyone loves (Mike the Frog)ger.

very fun

Really great job making that look like an actual wall switch dimmer!

This is a great switch. Good use of shadows.

Nice, I think the sound should be preloaded, and played first before te animation.You could shop each sound in four parts, and preplay half of sound when it starts and the other half when it's done.

Great all around switch: Clear design. I love the sound and I love the fact that the lights turn on. Good use of colour.

Thanks John Coffin!

I just tweaked my entry a bit: Fullscreen on Codepen

I like the label on the original one (i.e.what the switch is for). On both, I like the fact that we have contrast between on and off that the colour-blind can distinguish. Well executed all around.

Thanks John!

Really good animation. I'm not sure if there is enough contrast between on and off with the LEDs, but one can tell that it is pressed in (and this is on ... right?).

yes its on when its pressed in. I should work more on the design :p thanks

Thanks Guil.

My browser is at 1680 width and the left side is cut off, but when I resize to around 1440 it looks great! Would wrapping your drawings in a div container help? I want to know for myself so I can improve my own work.

Thanks Ashlynn Pai! I will try that and let you know :)

Hey Justin, I was looking at the wrong monitor settings on my dual monitor setup, so I think it actually looks perfect at around 1680 and gets cut off on my 1920 resolution. Hope I didn't mess you up.

Sweet! I love that turning the lights "off" reveals something.

This is my favorite so far

Really nice!!!

Very nice.

Waouh.. so nice

That brought a big smile to my day. Nicely executed, clear, and who doesn't like an homage to our favorite mushroom man?

Oh man, I love this!

This is really well done. It wouldn't be too complex given the right context. Red and green may be a problem for the colour-blind, but the flashing (when off) and the fact that it clicks down (when on) make it clear for all.

This is so small (although this is not a bad thing). The details are what makes this real: It looks like a switch that I can find in my home. I also like the "inspiration" tag at the bottom.

pretty amazing jacob, liked it alot!

Thanks guys!

So cool! I need to learn from your js code.

Thanks. I'd suggest not learning exclusively from my js code. I'm still learning.

Nice.

I really like the fact that the function of the switch is included on the switch. It is really easy to distinguish between a switch that is on and a switch that is off. Really well done.

Slick work on the gradients.

I think the only way this could be done is with some javascript.

Nice. You may want to add cursor: pointer to your switches so the mouse changes to a pointer.

I hope you're talking about mine! And if so, thanks!

Next steps are to make it not so ugly and add target browser support. It's a little quirky on touchscreen.

It's also easy to position on the screen using the checkbox class only since it's all within its own div, but I want it to be easy to resize, too.

Hopefully, I can get those changes made by the 27th!

Chris: Indeed I was talking about yours. It appears I hit the wrong "comment" link. Sorry.

Karen: Sorry for the comment mix up. I'm having trouble with my aim.

Well executed. The transition is really smooth.

I've mentioned this for a number of people, but I'll repeat it: The usage of red and green is AWESOME for 99.999999% of the people. The is a reason that mostly everyone has used this (and should use it) as a means of distinguishing on and off. It is something that is almost universally understood.

An issue can come about for colour-blind people if it is the ONLY means of distinguishing on and off. If you look at the other entries, some people have used other means of adding more contrast to distinguish on and off: A symbol or symbols, a solid shape vs an outline, a vertical orientation, and a higher degree of contrast (that is obvious in b&W) are some of the devices used.

Really nicely done. I believe that the LED is lit when it is on (and green) and that this adds a little extra contrast between on and off. I also like the tribute at the bottom (I wimped out and put it in the comments of my code ... not exactly giving credit where credit is due).

I agree that the form contests are worth the journey, even for novices such as myself. We learn by doing, and without a focus, we don't really know how well we have absorbed the material. I now know that I would like to review the CSS Foundations and take it sloooooooooowly trying stuff out along the way. I zipped through it assuming that I could always look stuff up, but I'm paying the price now: I can't look for something if I don't know that it exists.

Thank you John!

Hah ha. Yeah the designer that created the UI switches has an amazing set of work.

I really think it's a good idea for front end developers to use actual designs from dribble - unless you are really good at design yourself - and try to make those come to life.

Really nice!

Thanks Kirk!

I will try to take my design from dribble next time. It might be nice to focus on the "making those come to life" part of it.

I was expecting a "Footer" to appear when I turned it on. No matter.

The switch itself is awesome. I would suggest higher contrast between the red and the green (with the green brighter) so that if the page was displayed in B&W (or viewed by a red/green colour-blind person), one could distinguish on and off.

Hi John!

Because it was a micro example, I did't feel the need to create it to more complate.

The bigger contrast is a really great idea, it never come to my mind! Thank you! :)

This is probably my favorite so far. I like the minimal use of CSS to achieve the desired effect.

I think I might fork this and tweak around with it a bit. I tried to go with a DRY approach with mine in order to be able to resuse the selector properties I've already defined so that I can use the button over and over and just reskin as needed.

I think your approach definitely moves in that same direction where I could easily re-class /re-ID and create all new buttons without rewriting the CSS to much.

Nice job!

BTW - updated mine, too: http://codepen.io/GhostRed/pen/exfzs

The full button area, but no more is now clickable (overlapped a bit before), it can easily be resized and reskinned now, and the selectors are class/ID-independent (the DRY approach I was referring to).

Martha: I love it. This reminds me off an power switch for an speaker (and a high-end speaker at that). It is very obvious which is on and which is off.

Is the red square on? Otherwise, this is nicely done.

I really like the affects during the transition.

Looks good to me. I like the fact that the switch turns something on.

PS Just noticed the Easter Egg. Nice affects on the light bulb.

Thank You :)

That looks awesome!!!

Thanks john!!

Well executed animation. It has a slot machine feel. I really like the fact that the label changes. I've never noticed that before, but it is quite affective.

Great job !! Really clever.

Ya this is really neat!

Thanks a lot Guil Hernandez!

Awesome switch, Thomas. Congrats! Very nice recreation of the iOS 7 styling!

Guil, any chance we could get some feedback on our code? I'd love the input and I'm sure others would, too!

Congratulations Thomas, the markup is really clean. To react to Chris's idea, that would probably be extremely tedious for the instructor to review every single code, but I certainly wouldn't mind it either. Maybe something like "the most common errors", or "things to avoid" would work.

Like Rémi said, just common feedback would be great. I could hardly expect them to reply to everyone!

But a general list of what works well, suggestions and what definitely NOT t

Like Rémi said, just common feedback would be great. I could hardly expect them to reply to everyone!

But a general list of what works well, suggestions and what definitely NOT to do would be very helpful from a learning standpoint.

Nice work Chris. Just showed it some love on code pen. Good stuff!

Thank you.