Skip to content

Instantly share code, notes, and snippets.

/index.html

Created December 7, 2012 20:59
Show Gist options
  • Save anonymous/4236453 to your computer and use it in GitHub Desktop.
Save anonymous/4236453 to your computer and use it in GitHub Desktop.
Download ZIP
A CodePen by Cameron Baney. Creamy UI Elements - Custom buttons, range slider, radio buttons, checkboxes and tooltips. Dribbble Rebound of Gil's original shot.
Raw
index.html
<p class="credits">Dribbble Rebound of <a target="_blank" href="http://dribbble.com/shots/480058-Creamy-Ui-Elements">Creamy Ui Elements</a> by <a target="_blank" href="http://dribbble.com/Gmann___">Gil</a></p>
<form>
<fieldset>
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
</fieldset>
<fieldset>
<input type="radio" name="radio">
<input type="radio" name="radio">
<input type="radio" name="radio">
</fieldset>
<fieldset>
<input type="range" value="0">
</fieldset>
</form>
<p>Vestibulum id ligula porta <span class="tooltip">felis<span class="tooltip-text">This is a tooltip<i></i></span></span> euismod semper.</p>
<a href="#" class="btn">Interact with me!</a>
<a href="#" class="btn hover">Hover</a>
<a href="#" class="btn pressed">Pressed</a>
Raw
script.js
/*
Dribbble Rebound of Gil's original shot
http://dribbble.com/shots/480058-Creamy-Ui-Elements
Follow Me on Twitter: https://twitter.com/cameronbaney
*/
Raw
style.css
*,*:after,*:before {
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
body {
background: #dad8d3 url(http://cameronbaney.com/codepen/creamy-ui/bg.gif);
color: #827d72;
font: 14px/18px 'HelveticaNeue', Helvetica, Arial, sans-serif;
text-align: center
}
.credits {
bottom:10px;
left:10px;
position:absolute;
}
a {
color:#827d72;
}
p {
margin-bottom: 20px;
text-shadow: 0 1px 0 rgba(255,255,255,.67);
}
fieldset {
margin-bottom: 10px
}
/*--------------------------------------------------------------
1.0 - FORM ELEMENTS
--------------------------------------------------------------*/
form {
margin: 0 auto;
padding: 20px 0;
width:500px;
}
input[type="checkbox"], input[type="radio"]{
background: rgba(191,185,169,.2);
height: 16px;
cursor: pointer;
border-radius: 3px;
width:16px;
-moz-appearance:none;
-webkit-appearance:none;
box-shadow: 0 1px 2px rgba(0,0,0,.44) inset, 0 1px 0 rgba(255,255,255,.54);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.44) inset, 0 1px 0 rgba(255,255,255,.54);
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.44) inset, 0 1px 0 rgba(255,255,255,.54)
}
input[type="checkbox"]:hover, input[type="radio"]:hover {
background-color: rgba(191,185,169,.4)
}
input[type="radio"] {
border-radius: 25px;
-moz-border-radius: 25px;
-webkit-border-radius: 25px
}
input[type="checkbox"]:checked {
background: rgba(191,185,169,.2) url(http://cameronbaney.com/codepen/creamy-ui/check.png) no-repeat center center;
}
input[type="radio"]:checked {
background: rgba(191,185,169,.2) url(http://cameronbaney.com/codepen/creamy-ui/radio.png) no-repeat 3px center;
}
input[type="range"]{
background: rgba(191,185,169,.2);
height: 8px;
width:100%;
box-shadow: 0 1px 2px rgba(0,0,0,.45) inset, 0 1px 0 rgba(255,255,255,.47);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.45) inset, 0 1px 0 rgba(255,255,255,.47);
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.45) inset, 0 1px 0 rgba(255,255,255,.47);
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-moz-appearance:none;
-webkit-appearance:none;
}
input::-webkit-slider-thumb{
background: #dddcdb url(http://cameronbaney.com/codepen/creamy-ui/bg-radial.gif) center center;
border: 1px solid #909090;
cursor: pointer;
height:16px;
width:16px;
box-shadow: 0 2px 5px rgba(0,0,0,.2);
-moz-appearance:none;
-webkit-appearance:none;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
input::-webkit-slider-thumb:active {
box-shadow: 0 1px 1px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 1px rgba(0,0,0,.2);
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,.2);
}
/*--------------------------------------------------------------
2.0 - BUTTON
--------------------------------------------------------------*/
.btn {
background: rgb(207,202,190);
background: -moz-linear-gradient(top, rgba(207,202,190,1) 0%, rgba(203,198,185,1) 18%, rgba(179,172,153,1) 83%, rgba(175,168,148,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(207,202,190,1)), color-stop(18%,rgba(203,198,185,1)), color-stop(83%,rgba(179,172,153,1)), color-stop(100%,rgba(175,168,148,1)));
background: -webkit-linear-gradient(top, rgba(207,202,190,1) 0%,rgba(203,198,185,1) 18%,rgba(179,172,153,1) 83%,rgba(175,168,148,1) 100%);
background: -o-linear-gradient(top, rgba(207,202,190,1) 0%,rgba(203,198,185,1) 18%,rgba(179,172,153,1) 83%,rgba(175,168,148,1) 100%);
background: -ms-linear-gradient(top, rgba(207,202,190,1) 0%,rgba(203,198,185,1) 18%,rgba(179,172,153,1) 83%,rgba(175,168,148,1) 100%);
background: linear-gradient(to bottom, rgba(207,202,190,1) 0%,rgba(203,198,185,1) 18%,rgba(179,172,153,1) 83%,rgba(175,168,148,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cfcabe', endColorstr='#afa894',GradientType=0 );
border: 1px solid #938e81;
color: #767268;
display: inline-block;
font: 15px/15px 'HelveticaNeue-Bold', Helvetica, Arial, sans-serif;
margin: 0 5px;
padding: 14px 23px;
text-decoration: none;
text-shadow: 0 1px 0 rgba(255,255,255,.81);
box-shadow: 0 2px 3px rgba(0,0,0,.28), 0 1px 0 #dedcd3 inset;
-moz-box-shadow: 0 2px 3px rgba(0,0,0,.28), 0 1px 0 #dedcd3 inset;
-webkit-box-shadow: 0 2px 3px rgba(0,0,0,.28), 0 1px 0 #dedcd3 inset;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px
}
.btn:hover,.btn.hover {
box-shadow: 0 2px 3px rgba(0,0,0,.28), 0 1px 0 #dedcd3 inset, 0 0 3px #fff inset;
-moz-box-shadow: 0 2px 3px rgba(0,0,0,.28), 0 1px 0 #dedcd3 inset, 0 0 3px #fff inset;
-webkit-box-shadow: 0 2px 3px rgba(0,0,0,.28), 0 1px 0 #dedcd3 inset, 0 0 3px #fff inset;
}
.btn:active,.btn.pressed {
background: rgb(186,180,162);
background: -moz-linear-gradient(top, rgba(186,180,162,1) 0%, rgba(196,190,176,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(186,180,162,1)), color-stop(100%,rgba(196,190,176,1)));
background: -webkit-linear-gradient(top, rgba(186,180,162,1) 0%,rgba(196,190,176,1) 100%);
background: -o-linear-gradient(top, rgba(186,180,162,1) 0%,rgba(196,190,176,1) 100%);
background: -ms-linear-gradient(top, rgba(186,180,162,1) 0%,rgba(196,190,176,1) 100%);
background: linear-gradient(to bottom, rgba(186,180,162,1) 0%,rgba(196,190,176,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bab4a2', endColorstr='#c4beb0',GradientType=0 );
color: #6a675e;
box-shadow: 0 2px 0 rgba(255,255,255,.76), 0 1px 5px rgba(0,0,0,.26) inset;
-moz-box-shadow: 0 2px 0 rgba(255,255,255,.76), 0 1px 5px rgba(0,0,0,.26) inset;
-webkit-box-shadow: 0 2px 0 rgba(255,255,255,.76), 0 1px 5px rgba(0,0,0,.26) inset;
}
/*--------------------------------------------------------------
3.0 - TOOLTIP
--------------------------------------------------------------*/
.tooltip {
cursor: default;
font-weight: bold;
text-decoration: underline;
position: relative;
}
.tooltip:hover .tooltip-text {
display:block;
top:-35px;
}
.tooltip-text {
background: -moz-linear-gradient(top, rgba(205,201,188,0.75) 0%, rgba(200,196,182,0.75) 25%, rgba(180,173,154,0.75) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(205,201,188,0.75)), color-stop(25%,rgba(200,196,182,0.75)), color-stop(100%,rgba(180,173,154,0.75)));
background: -webkit-linear-gradient(top, rgba(205,201,188,0.75) 0%,rgba(200,196,182,0.75) 25%,rgba(180,173,154,0.75) 100%);
background: -o-linear-gradient(top, rgba(205,201,188,0.75) 0%,rgba(200,196,182,0.75) 25%,rgba(180,173,154,0.75) 100%);
background: -ms-linear-gradient(top, rgba(205,201,188,0.75) 0%,rgba(200,196,182,0.75) 25%,rgba(180,173,154,0.75) 100%);
background: linear-gradient(to bottom, rgba(205,201,188,0.75) 0%,rgba(200,196,182,0.75) 25%,rgba(180,173,154,0.75) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bfcdc9bc', endColorstr='#bfb4ad9a',GradientType=0 );
border: 1px solid #938e81;
color: #767268;
display: none;
left: 50%;
margin: 0 0 0 -65px;
padding: 5px;
position: absolute;
top: 0;
width:130px;
text-shadow: 0 1px 0 rgba(255,255,255,.67);
box-shadow: 0 2px 0 rgba(255,255,255,.76), 0 1px 0 #e1ded7;
-moz-box-shadow: 0 2px 0 rgba(255,255,255,.76), 0 1px 0 #e1ded7;
-webkit-box-shadow: 0 2px 0 rgba(255,255,255,.76), 0 1px 0 #e1ded7;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment