Here's Robert van Klinken's Coconut UI in CSS (with some base64 encoded images). I couldn't achieve the two colours on both sides of the range slider, nor the blocky tick, and not even the curved tail of the chat bubble, not to mention I didn't have Proxima Nova handy.
Overall though, I'm really happy with the result, and I've definitely learnt some new things about styling form elements, and how wonderful it is!
Thankfully @Joshua Hibbert helped me out with animating the switches, and the button hovers, such a great bloke!
Note: This works beautifully in WebKit browsers, mainly Chrome, but if you want to support it in other browsers, be my guest, grab the code, clean it up, prefix it etc, you're free to do what you want!
→ Grab the code! ←
EDIT: Oops! Spelt Frappuccino wrong! You get the idea, anyway.
L or F like
Show and tell for designers
What are you working on? Dribbble is a community of designers sharing screenshots of their work, process, and projects.
Copyright © 2009–2016 Dribbble LLC. All screenshots © their respective owners. Shipped from Salem, Mass. USA.