Skip to content

Instantly share code, notes, and snippets.

@JayGeorge

JayGeorge/dabblet.css

Created December 21, 2011 13:47
Show Gist options
  • Save JayGeorge/1506117 to your computer and use it in GitHub Desktop.
Save JayGeorge/1506117 to your computer and use it in GitHub Desktop.
Download ZIP
Untitled
Raw
dabblet.css
.button,
ul.pageMenu li a {
background-color: #343534;
border: 1px solid #000;
color: #ffffff;
cursor: pointer;
display: block;
font-weight: bold;
margin: 0;
overflow: hidden;
padding: 8px 33px 8px 15px;
position: relative;
text-align: left;
text-decoration: none;
text-overflow: ellipsis;
text-shadow: 0 -1px 1px #0e7375;
white-space: nowrap;
background-image: -webkit-gradient(linear, left top, left bottom,
from( #3d3e3d), to( #343534
/*{background-end}*/)); /* Saf4+, Chrome */
background-image: -webkit-linear-gradient(#3d3e3d
/*{background-start}*/, #343534 /*{background-end}*/); /* Chrome 10+,
Saf5.1+ */
background-image: -moz-linear-gradient(#3d3e3d
/*{background-start}*/, #343534 /*{background-end}*/); /* FF3.6 */
background-image: -ms-linear-gradient(#3d3e3d /*{background-start}*/,
#343534 /*{background-end}*/); /* IE10 */
background-image: -o-linear-gradient(#3d3e3d /*{background-start}*/,
#343534 /*{background-end}*/); /* Opera 11.10+ */
background-image: linear-gradient(#3d3e3d /*{background-start}*/,
#343534 /*{background-end}*/);
-moz-border-radius: .6em;
-webkit-border-radius: .6em;
border-radius: .6em;
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
}
.button:hover,
ul.pageMenu li a:hover {
background-color: #454545;
border: 1px solid #343534;
text-shadow: 0 -1px 1px #00675d;
background-image: -webkit-gradient(linear, left top, left bottom,
from( #4d4d4d /*{background-start}*/), to( #454545
/*{background-end}*/)); /* Saf4+, Chrome */
background-image: -webkit-linear-gradient(#4d4d4d
/*{background-start}*/, #454545 /*{background-end}*/); /* Chrome 10+,
Saf5.1+ */
background-image: -moz-linear-gradient(#4d4d4d
/*{background-start}*/, #454545 /*{background-end}*/); /* FF3.6 */
background-image: -ms-linear-gradient(#4d4d4d /*{background-start}*/,
#454545 /*{background-end}*/); /* IE10 */
background-image: -o-linear-gradient(#4d4d4d /*{background-start}*/,
#454545 /*{background-end}*/); /* Opera 11.10+ */
background-image: linear-gradient(#4d4d4d /*{background-start}*/,
#454545 /*{background-end}*/);
}
.button:active,
ul.pageMenu li a:active {
background-color: #454545;
border: 1px solid #1d727a;
text-shadow: 0 -1px 1px #1d727a;
background-image: -webkit-gradient(linear, left top, left bottom,
from( #454545 /*{background-start}*/), to( #4d4e4d
/*{background-end}*/)); /* Saf4+, Chrome */
background-image: -webkit-linear-gradient(#454545
/*{background-start}*/, #4d4e4d /*{background-end}*/); /* Chrome 10+,
Saf5.1+ */
background-image: -moz-linear-gradient(#454545
/*{background-start}*/, #4d4e4d /*{background-end}*/); /* FF3.6 */
background-image: -ms-linear-gradient(#454545 /*{background-start}*/,
#4d4e4d /*{background-end}*/); /* IE10 */
background-image: -o-linear-gradient(#454545 /*{background-start}*/,
#4d4e4d /*{background-end}*/); /* Opera 11.10+ */
background-image: linear-gradient(#454545 /*{background-start}*/,
#4d4e4d /*{background-end}*/);
}
.buttonInline {
display: inline-block;
}
.button span,
.pageMenu li a span {
background-image: url(../../../images/aaos2012/arrow.png);
background-position: 0 0px;
background-repeat: no-repeat;
height: 20px;
position: absolute;
width: 18px;
right: 5px;
}
Raw
dabblet.html
<body>
<ul class="pageMenu">
<li><a href="home.php">HOME<span></span></a></li>
<li><a href="somethingElse.php">SOMETHING<span></span></a></li>
</ul>
</body>
Raw
settings.json
{"view":"split","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment