Coconut

1 Attachment

18 Responses

  1. Robert van Klinken Robert van Klinken

    Coconut UI. Use it wherever you like.

    almost 2 years ago

  2. Kevin Anderson Kevin Anderson

    Love them!

    almost 2 years ago

  3. Thom Thom

    Me Gusta! :D

    almost 2 years ago

  4. Maxwell Barvian Maxwell Barvian

    Great work! Although I must admit I was expecting it to use the Coconut font :P

    almost 2 years ago

  5. Jack Bingham Jack Bingham

    Love the speech bubble!

    likes

    almost 2 years ago

  6. Garrett Godsey Garrett Godsey

    Ditto on the speech bubble :)

    almost 2 years ago

  7. Florin Gorgan Florin Gorgan

    I love this UI kit very much! It's so clean and modern! Amazing job!

    almost 2 years ago

  8. Tim van Daatselaar Tim van Daatselaar

    what font did you use?

    likes

    almost 2 years ago

  9. Robert van Klinken Robert van Klinken

    @Tim van Daatselaar Proxima N

    @Haziq Mir Another weather app or twitter ui?

    likes

    almost 2 years ago

  10. Andrey S. Rodrigues ☝ Andrey S. Rodrigues ☝

    great!

    almost 2 years ago

  11. Tim de Groot Tim de Groot

    Thanks dude! Gonna have a look at it ;)

    almost 2 years ago

  12. Haziq Mir 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

    almost 2 years ago

  13. Tommy dopes Tommy dopes

    Less is more, very nice!

    almost 2 years ago

  14. Daryl Ginn Daryl Ginn

    @Haziq Mir Chill chill.

    likes

    almost 2 years ago

  15. Mason Yarnell Mason Yarnell

    Loving me some coconut! Delicious comment bubble, buddy.

    likes

    almost 2 years ago

  16. almost 2 years ago

  17. 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.

    ================================================

    almost 2 years ago

  18. Julia Kostreva Julia Kostreva

    this is GORGEOUS! thank you!

    over 1 year ago

keyboard shortcuts: previous shot next shot L or F like