Coconut UI CSS

by J. Albert Bowden

HTML

<div class="wrapper">
<div class="section">
<!-- Username -->
<input name="username" type="username" value="Username" class="username">
    
<!-- Dropdown -->
<select name="select_dd" type="dropdown" class="select_dd">
<option label="Select size" selected="selected" disabled="disabled"></option>
<option value="1">24" Monitor</option>
<option value="2">27" Monitor</option>
</select>
</div>    
    
<div class="section">
<!-- Switches -->
<input type="checkbox" class="switch">
<input type="checkbox" class="switch dot">
<input type="checkbox" class="switch square">
<input type="checkbox" class="switch pill">
    
<!-- Range -->
<input type="range" value="65">
    
</div>

    <div class="section">
<!-- Speech Bubble -->
<div class="speechbubble"><p>Latte macchiato</p><hr><p>Coconut frappucino</p></div>
    </div>
<div class="small section">

<!-- Search Field -->
<input type="search" name="search" value="Search"/>

<div class="section" style="width: 147px;">    
<!-- Checkboxes -->
<input type="checkbox" class="tick" checked>
<input type="checkbox" class="cross" checked>
<input type="checkbox">
    
<!-- Radio Buttons -->
<input type="radio" name="group1" checked>
<input type="radio" name="group1" class="omega">   
</div>
</div>

<!-- Chatbubble -->
<div class="chatbubble">Whipped cream?</div>

<!-- Button -->
<a class="button" style="margin:-1px 7px 0 2px">Blend</a>
<a class="button active" style="margin-top:-1px;">Blend</a>
</div>

CSS

/* C O C O N U T   U I   C S S */

* {
margin:0;
padding:0;
}

html, body {
height: 100%;
overflow: hidden;
}

body {
background-color:#f6f6f6;
font: 14px/20px Helvetica Neue, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
text-shadow:0 0 1px rgba(0,0,0,0.01);
-webkit-text-stroke:1px transparent;
text-rendering:optimizeLegibility;
padding:20px;
}

.wrapper {
margin:0 auto; width:330px;height:264px;padding:36px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -201px;
margin-top: -201px;
display:inline-block;
}



/* B U T T O N S */

.button, .select_dd  {
color: #595959;
text-shadow: 0 1px 0px rgba(255,255,255,1.0);
background-color: #fff;
background-image: -webkit-linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.089));
border-radius: 3px;
box-shadow:inset 0px 1px 1px 0px rgba(255, 255, 255, 0.7),0 1px 0px 0px rgba(0, 0, 0, 0.073);
border: 1px solid rgba(0,0,0,0.37);
cursor: pointer;
display: inline-block;
font-family:inherit;
font-weight: bold;
font-size: 14px;
line-height:20px;
margin:0;
padding:8px 16px;
position: relative;
text-decoration: none;
text-align: center;
vertical-align: middle;
-webkit-appearance: none;
-webkit-transition: .2s;
-moz-transition: .2s;
-ms-transition: .2s;
-o-transition: .2s;
transition: .2s;
}

.button:hover, .select_dd:hover {
background-color: #f6f6f6;
outline: none;
}

.button:focus, .select_dd:focus {
/*box-shadow:0px 0px 10px 0px #13B0FA;*/
outline:none;
}

.button:active, .button.active, .select_dd:active {
background-color:#ddd;
background-image:-webkit-linear-gradient(rgba(0, 0, 0, .042), transparent);
box-shadow:inset 0px 1px 2px 0px rgba(0, 0, 0, 0.073);
outline: none;
-webkit-transition:none;
-moz-transition:none;
-ms-transition:none;
-o-transition:none;
transition:none;
}



/* S E L E C T */

.select_dd {
margin:-4px 1px 0 0;
background-image:-webkit-linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.089)),...

JavaScript

//Made with ♥ by Louis Bullock
// louisbullock.com.au