Skip to content

Instantly share code, notes, and snippets.

@darrentorpey
Created December 19, 2011 20:51
Show Gist options
  • Save darrentorpey/1498807 to your computer and use it in GitHub Desktop.
Save darrentorpey/1498807 to your computer and use it in GitHub Desktop.
This is my dabble!
/**
* This is my dabble!
*/
background: #f06;
background: linear-gradient(45deg, #f06, yellow);
min-height:100%;
/*text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);*/
.tab_button {
color: #333333;
text-shadow: 0 1px 1px rgba(250, 250, 250, 0.6);
border: solid 1px #d5d5d5;
display: inline-block;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
font: 500 12px Helvetica, sans-serif;
line-height: 11px;
padding: 0.6em 3em;
-webkit-box-shadow: 0 1px 3px rgba(250, 250, 250, 0.9);
-moz-box-shadow: 0 1px 3px rgba(250, 250, 250, 0.9);
box-shadow: 0 1px 3px rgba(250, 250, 250, 0.9);
-webkit-font-smoothing: subpixel-antialiased;
}
.tab_button:first-child {
border-top-left-radius: 2em;
border-bottom-left-radius: 2em;
}
.tab_button:last-child {
border-top-right-radius: 2em;
border-bottom-right-radius: 2em;
}
.tab_button.selected {
background: #dbdbdb;
background: -webkit-gradient(linear, left top, left bottom, from(#CCC), to(#f6f7f8));
background: -moz-linear-gradient(top, #f6f7f8, #e4e6e7);
}
nav ul {
overflow: hidden;
}
nav li {
list-style-image: none;
list-style-type: none;
white-space: nowrap;
display: inline;
float: left;
margin: 0px;
}
nav li a {
color: #222;
text-decoration: none;
}
body {
font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
padding: 100px;
font-size: 13px;
}
nav {
background: #fff;
margin: 0 auto;
width: 640px;
height: 200px;
padding: 20px 20px;
text-align: center;
/* border-radius */
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
/* box-shadow */
-webkit-box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
-moz-box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
}
<nav>
<ul>
<li class="tab_button selected">
<a href="#">Enter a list of emails</a>
</li>
<li class="tab_button">
<a" href="#">Upload contacts file</a>
</li>
</ul>
</nav>
{"page":"css","view":"split-vertical"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment