Skip to content

Instantly share code, notes, and snippets.

@digitalnature
digitalnature / dabblet.css
Created October 23, 2013 16:35
Rounded Ribbon Box
/* Rounded Ribbon Box */
body{
font: 14px Helvetica, Arial;
}
.ribbon {
width: 600px;
margin: 40px auto 10px;
color: #333;
button{
color: #f2f4f0;
text-shadow: 0px 1px 0px rgba(0,0,0, 0.75);
font-size: 18px;
padding: 10px 30px;
background: linear-gradient(to bottom, #6ca44b 0%, #4d872b 100%);
border: 4px solid #e5e5e5;
border-radius: 40px;
box-shadow: inset 0px 0px 2px rgba(0,0,0, 0.5),
inset 0px 2px 0px rgba(255,255,255, 0.25);
/* box thing */
div{
width:300px;
height:180px;
margin: 50px auto;
position:relative;
background: #fff;
box-shadow: 0px 0px 30px rgba(0,0,0, 0.25);
border-radius: 3px;
/**
* Custom checkboxes - http://stackoverflow.com/questions/16492722/customize-radio-box-like-in-my-concept
*/
body{
padding: 80px;
margin: 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 20px;
@digitalnature
digitalnature / dabblet.css
Created February 24, 2013 01:50
box shadow effect - v2
/* box shadow effect - v2
http://stackoverflow.com/questions/15047702/uniform-shadows-left-of-and-below-a-corner-of-an-html-element-using-css
*/
.shadowBottom{
background: #fff;
border: 1px solid #ccc;
position:relative;
box-shadow: 0 0 6px rgba( 0, 0, 0, 0.2);
@digitalnature
digitalnature / dabblet.css
Created February 18, 2013 01:27
CSS ribbon
/* CSS ribbon
http://stackoverflow.com/questions/14928021/css-how-to-make-edgy-corners-with-css
*/
body{
background: #333;
}
@digitalnature
digitalnature / dabblet.css
Created February 17, 2013 16:58
Tree structure using CSS:
/*
Tree structure using CSS:
http://stackoverflow.com/questions/14922247/how-to-get-a-tree-in-html-using-pure-css
*/
.tree, .tree ul{
font: normal normal 14px/20px Helvetica, Arial, sans-serif;
list-style-type: none;
margin-left: 0 0 0 10px;
padding: 0;
@digitalnature
digitalnature / dabblet.css
Created February 8, 2013 03:21
playing around with:
/* playing around with:
http://stackoverflow.com/questions/14761316/advanced-css-rollover-parent-container-image-swap
*/
body{
font: normal normal 16px/18px "Lucida Grade", Calibri;
}
ul, li{
margin: 0;