Skip to content

Instantly share code, notes, and snippets.

@tango238

tango238/csstab.html

Created September 6, 2011 18:38
Show Gist options
  • Save tango238/1198555 to your computer and use it in GitHub Desktop.
Save tango238/1198555 to your computer and use it in GitHub Desktop.
Download ZIP
[CSS3] Tab
Raw
csstab.html
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSS3 Tab</title>
<style>
ul {
border-bottom: 3px solid #cc5d00;
}
li {
display: inline-block;
margin: 0 2px 0 0;
}
li a {
display: block;
border-radius: 6px 6px 0 0;
background-color: #cc5d00;
background: -webkit-gradient(linear, left top, left bottom, from(1.0, #cc5d00), color-stop(0.0, #fd8608));
background: -webkit-linear-gradient(top, #fd8608 0%, #cc5d00 100%);
background: -moz-linear-gradient(top, #fd8608 0%, #cc5d00 100%);
background: -o-linear-gradient(top, #fd8608 0%, #cc5d00 100%);
background: linear-gradient(top, #fd8608 0%, #cc5d00 100%);
text-decoration: none;
padding: 12px 35px 12px 25px;
line-height: 1.2;
font-size: 18px;
font-family: Arial, Helvetica, san-serif;
font-weight: bold;
color: #fff;
border: 1px solid rgba(140, 130,100, 0.5);
border-bottom: none;
text-shadow: 0 -1px 1px rgba(0,0,0, 0.5);
-webkit-box-shadow: inset 1px 1px 1px 1px rgba(255,255,255, 0.4), inset -1px 0px 1px rgba(255,255,255, 0.4);
box-shadow: inset 1px 1px 1px 1px rgba(255,255,255, 0.4), inset -1px 0px 1px rgba(255,255,255, 0.4);
}
li a:after {
content: "≫";
position: absolute;
padding-left: 10px;
}
</style>
</head>
<body>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Information</a></li>
<li><a href="#">About</a></li>
</ul>
<script>
(function(){
var btns = document.getElementsByTagName('a');
for(var i=0; i < btns.length; i++){
var btn = btns[i];
btn.addEventListener('click', function(event){
event.preventDefault();
});
}
})();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment