Switching It Up


People who have spoken to me can tell you have mixed feelings about the new iOS. On one hand, the interface is sleek and minimal and flat and all sorts of lovely things like that. On the other hand, it’s rather sloppy (and don’t get me started on the home screen icons). But I’m not going to sit here and write a whole big post about the “goods” and “bads” of iOS7. Plenty of other websites will do that for me. I’m just here for a bit of show-and-tell. And maybe some other time I can rant more about that stuff.

I love the new switches in iOS7. They’re simple and they look nice and they’re fun as hell to play with. So I decided to, during one of the duller moments of my workday, re-create them using HTML and CSS. The switches are simple checkboxes with no extra HTML markup (hooray for pseudo-elements!) which means they can be very easily integrated into existing webpages. I also created two versions of the switch: a to-scale, pixel-perfect recreation of the one found in iOS7; and a half-scale version that is more appropriate for web use (CSS scales to retina sizes without quality loss). You can check out a live demo or grab the code here. Feel free to use these in any projects; I’d love to see what you guys create so send me a link if you like!

Switching It Up

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s