Snap Builder HTML5 CSS3 Free Public Codes Library


<!doctype html>
<!-- simplified doctype works for all previous versions of HTML as well -->
<!-- Paul Irish's technique for targeting IE, modified to only target IE6, applied to the html element instead of body -->
<!--[if lt IE 7 ]><html lang="en" class="no-js ie6"><![endif]-->
<!--[if (gt IE 6)|!(IE)]><!-->
<html lang="en" class="no-js">
<!--<![endif]-->
<head>
<title>HTML5 CSS3 Glow Tabs with Box Shadow</title>

<style>
/* Begin HTML5 Glow Tabs with Box Shadow */
/* == This Script Free To Use Providing This Notice Remains == */
/* == This Script Has Been Found In The http://snapbuilder.com Free Public Codes Library == */
/* == NOTICE:Though This Material May Have Been In A Public Depository, Certain Author Copyright Restrictions May Apply == */
/* == Created by: Paul Irish : http://www.paulirish.com/ : Creative Commons License == */
html, body, div, span, applet, object, iframe, code, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, del, dfn, font, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, dd, dl, dt, li, ol, ul, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
margin:0px;padding:0px;border:0px;font-weight:normal;font-style:normal;font-family:verdana;font-size:100%;text-align:left;text-shadow:0px 1px 0px rgba(0,0,0,0.4);}
body {background:#131925;}
table {border-collapse:collapse;border-spacing:0;}
ul {list-style:none;}
q:before, q:after, blockquote:before, blockquote:after {content:"";}
h1 {color:#fff;text-align:center;padding:80px 0px 30px 0px;}
h2 {text-align:center;padding:40px 0px 0px 0px;width:80%;margin:0px auto;}
ol {list-style:decimal;width:380px;padding:30px 0px 0px 50px;margin:0px auto;}
ul#navigation {height:36px;padding:20px 20px 0px 30px;width:904px;margin:0px auto;position:relative;overflow:hidden;}
ul#navigation li {-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;float:left;width:110px;margin:0px 10px 0px 0px;background-color:#2B477D;border:solid 1px #415F9D;position:relative;z-index:1;}
ul#navigation li.selected {z-index:3;}
ul#navigation li.shadow {width:100%;height:2px;position:absolute;bottom:-3px;left:0px;border:none;background:none;z-index:2;-webkit-box-shadow:#111 0 -2px 6px;-moz-box-shadow:#111 0 -2px 6px;box-shadow:#111 0 -2px 6px;}
ul#navigation li a:link, ul#navigation li a:visited {-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;display:block;text-align:center;width:110px; /* set the tab width */ height:40px; /* set the tab height */ line-height:36px;font-family:Arial, Helvetica, sans-serif;text-transform:uppercase;text-decoration:none;font-size:13px;font-weight:bold;color:#fff;letter-spacing:1px;outline:none;float:left;background:#2B477D;-webkit-transition:background-color 0.3s linear;-moz-transition:background-color 0.3s linear;-o-transition:background-color 0.3s linear;}
ul#navigation li a:hover {background-color:#5a87dd;}
ul#navigation li.selected a:link, ul#navigation li.selected a:visited {color:#2B477D;border:solid 1px #fff;-webkit-transition:background-color 0.2s linear;background:-moz-linear-gradient(top center, #d1d1d1, #f2f2f2 80%) repeat scroll 0 0 #f2f2f2;background:-webkit-gradient(linear, left bottom, left top, color-stop(.2, #f2f2f2), color-stop(.8, #d1d1d1));background-color:#f2f2f2;}
#content {width:850px;background:#f2f2f2;padding:0px 0px 40px 0px;margin:0px auto;}
#code {color:#fff;text-shadow:0px 1px 0px rgba(0,0,0,0.4);text-align:center;}
.desc {font-family:verdana,arial, ms sans serif;font-size:100%;}
</style>

</head>
<body>

<div style="width:850px; margin:0px auto 0px auto;">

<h1>CSS3 Glow Tabs with Box Shadow</h1>
<ul id="navigation">
<li class="one selected"><a href="#">Details</a></li>
<li class="two"><a href="#">Schedule</a></li>
<li class="three"><a href="#">Speakers</a></li>
<li class="four"><a href="#">Sponsors</a></li>
<li class="five"><a href="#">Register</a></li>
<li class="shadow"></li>
</ul>

<div id="content">
<h2>The tabs in this demo are image-less tabs<br />with 4 different CSS3 enhancements:</h2>
<ol>
<li class="desc">Rounded Corners (border-radius)</li>
<li class="desc">Box Shadow (bottom of inactive tabs)</li>
<li class="desc">Transitions (the glow on hover)</li>
<li class="desc">Gradients (the active tab)</li>
</ol>
<h2>CSS3 Transitions work in Chrome, Safari, Opera 10.5 & Firefox 3.7</h2>
</div>

</div>

<script>
$(document).ready(function(){
$("ul#navigation li a").click(function() {
$("ul#navigation li").removeClass("selected");
$(this).parents().addClass("selected");
return false;
});
});
</script>

<br /><br />
<div id="snippet">
[ This code example from <a href="http://snapbuilder.com/code_snippets/copy_code_snippet_152.html">Glow Tabs with Box Shadow</a> page. ]
</div>

</body>
</html>
Code Snippet </> Info
