Coconut UI. Use it wherever you like.
over 1 year ago
Me Gusta! :D
Great work! Although I must admit I was expecting it to use the Coconut font :P
Love the speech bubble!
Ditto on the speech bubble :)
I love this UI kit very much! It's so clean and modern! Amazing job!
what font did you use?
@Tim van Daatselaar Proxima N
@Haziq Mir Another weather app or twitter ui?
Thanks dude! Gonna have a look at it ;)
@Robert van Klinken Huh? I didn't hit on the idea. Create as many UI kits as you like but take a look:
Less is more, very nice!
@Haziq Mir Chill chill.
Loving me some coconut! Delicious comment bubble, buddy.
by Bert Devriese
Recreated the Coconut UI by @Robert van Klinken, in Helvetica.
If you want to grab the PSD, it's available on Creative Market
over 1 year ago
by Louis Bullock
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.
this is GORGEOUS! thank you!
keyboard shortcuts: ← previous shot → next shot 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–2013 Dribbble LLC. All screenshots © their respective owners. Shipped from Salem, Mass. USA.
Follow Dribbble on Twitter