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!
18 Responses
Pro
Robert van Klinken
Coconut UI. Use it wherever you like.
about 1 year ago
Pro
Kevin Anderson
Love them!
about 1 year ago
Pro
Thom
Me Gusta! :D
about 1 year ago
Pro
Maxwell Barvian
Great work! Although I must admit I was expecting it to use the Coconut font :P
about 1 year ago
Pro
Jack Bingham
Love the speech bubble!
about 1 year ago
Pro
Garrett Godsey
Ditto on the speech bubble :)
about 1 year ago
I love this UI kit very much! It's so clean and modern! Amazing job!
about 1 year ago
Pro
Tim van Daatselaar
what font did you use?
about 1 year ago
Pro
Robert van Klinken
@Tim van Daatselaar Proxima N
@Haziq Mir Another weather app or twitter ui?
about 1 year ago
great!
about 1 year ago
Pro
Tim de Groot
Thanks dude! Gonna have a look at it ;)
about 1 year ago
Pro
Haziq Mir
@Robert van Klinken Huh? I didn't hit on the idea. Create as many UI kits as you like but take a look:
http://drbl.in/dDQd
http://drbl.in/KDT
http://drbl.in/crRc
about 1 year ago
Less is more, very nice!
about 1 year ago
Pro
Daryl Ginn
@Haziq Mir Chill chill.
about 1 year ago
Pro
Mason Yarnell
Loving me some coconut! Delicious comment bubble, buddy.
about 1 year ago
Rebound
Helvetinut psd
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
about 1 year ago
Rebound
Coconut UI Css
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.
================================================
12 months ago
this is GORGEOUS! thank you!
10 months ago