Skip to content

Instantly share code, notes, and snippets.

@mayuroks

mayuroks/dabblet.css

Created September 8, 2012 19:28
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mayuroks/3678944 to your computer and use it in GitHub Desktop.
Save mayuroks/3678944 to your computer and use it in GitHub Desktop.
Download ZIP
The first commented line is your dabblet’s title
Raw
dabblet.css
/**
* The first commented line is your dabblet’s title
*/
@charset "UTF-8";
/* CSS Document */
.span2{
height: 30px;
width: 150px;
}
.btn6 {
position:relative;
padding:8px;
margin-left:5px;
font-family: 'Open Sans', sans-serif;
font-size:18px;
text-align:center;
text-decoration:none;
background-image: -khtml-gradient(linear, left top, left bottom, from(#ededed), to(#afafaf));
background-image: -moz-linear-gradient(top, #ededed, #afafaf);
background-image: -ms-linear-gradient(top, #ededed, #afafaf);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ededed), color-stop(100%, #afafaf));
background-image: -webkit-linear-gradient(top, #ededed, #afafaf);
background-image: -o-linear-gradient(top, #ededed, #afafaf);
background-image: linear-gradient(#ededed, #afafaf);
/* border radius */
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 5px;
border-radius: 5px 5px 5px 5px;
/*box shadow values*/
-moz-box-shadow: 0px 1px 3px #141414;
-webkit-box-shadow: 0px 1px 3px #141414;
box-shadow: 0px 1px 3px #141414;
}
.btn6:active {
top:1px;
background-image: -khtml-gradient(linear, left top, left bottom, from(#afafaf), to(#ededed));
background-image: -moz-linear-gradient(top, #afafaf, #ededed);
background-image: -ms-linear-gradient(top, #afafaf, #ededed);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #afafaf), color-stop(100%, #ededed));
background-image: -webkit-linear-gradient(top, #afafaf, #ededed);
background-image: -o-linear-gradient(top, #afafaf, #ededed);
background-image: linear-gradient(#afafaf, #ededed);
}
.btn6::before {
background-color:#999;
content:"";
width:1px;
height:1px;
position:absolute;
display:block;
padding:6px;
top:14px;
left:130px;
font-size:16px;
font-weight:bold;
text-shadow:1px 1px 0px #07526e;
z-index:1;
background-image: -khtml-gradient(linear, left top, left bottom, from(#5b5b5b), to(#282828));
background-image: -moz-linear-gradient(top, #5b5b5b, #282828);
background-image: -ms-linear-gradient(top, #5b5b5b, #282828);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5b5b5b), color-stop(100%, #282828));
background-image: -webkit-linear-gradient(top, #5b5b5b, #282828);
background-image: -o-linear-gradient(top, #5b5b5b, #282828);
background-image: linear-gradient(#5b5b5b, #282828);
/*border radius*/
border-radius: 10px;
}
.btn6:active::before {
background-image: -khtml-gradient(linear, left top, left bottom, from(#00a5ff), to(#006399));
background-image: -moz-linear-gradient(top, #00a5ff, #006399);
background-image: -ms-linear-gradient(top, #00a5ff, #006399);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #00a5ff), color-stop(100%, #006399));
background-image: -webkit-linear-gradient(top, #00a5ff, #006399);
background-image: -o-linear-gradient(top, #00a5ff, #006399);
background-image: linear-gradient(#00a5ff, #006399);
-moz-box-shadow: 0px 0px 7px #2ae5eb;
-webkit-box-shadow: 0px 0px 7px #2ae5eb;
box-shadow: 0px 0px 7px #2ae5eb;
}
background: #f06;
background: linear-gradient(45deg, #f06, yellow);
min-height: 100%;
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<body>
<div class="span2 btn6">
</body>
Raw
settings.json
{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment