Glow Tabs with Box Shadow - Create glow tabs with box shadows for showing content .
Example: View Code Demo
<!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 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 : : 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="">Glow Tabs with Box Shadow</a> page. ] </div> </body> </html>