Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

296 lines (253 sloc) 8.26 kb
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title>CSS3 PIE Demo: Tabs</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script type="text/javascript">
$( function() {
var cb = $( '#togglePIE' );
if( !( cb[0] && cb[0].addBehavior ) ) return; //IE only
function togglePIE() {
$( cb[0].getAttribute( 'data-target' ) ).each( function() {
if( cb.is(":checked") ) {
if( !this.behaviorId ) {
this.behaviorId = this.addBehavior( '../build/PIE.htc' );
}
}
else if( this.behaviorId ) {
this.removeBehavior( this.behaviorId );
this.behaviorId = null;
}
} );
}
cb.change( togglePIE );
togglePIE();
} );
</script>
<style type="text/css">
/* Page styles */
body {
font-size: 12px;
font-family: sans-serif;
}
section {
display: block;
}
.control, .demo {
border: 1px solid #CCC;
padding: 10px;
margin: 2em 0;
float: left;
width: 275px;
height: 250px;
}
.control {
margin-right: 1em;
}
.control .desc, .demo .desc {
height: 4em;
}
.code {
clear: both;
}
.code pre {
background: #EEE;
padding: 10px;
}
/* Demo styles */
.tabBox {
padding: 0 3px;
font-size: 12px;
font-family: sans-serif;
}
.tabBox .tabs {
margin: 0;
padding: 0 10px;
overflow: hidden;
margin-bottom: -1px;
height: 2.25em;
}
.tabBox .tabs li {
float: left;
list-style: none;
margin: 0;
padding: .25em .25em 0;
height: 2em;
overflow: hidden;
position: relative;
z-index: 1;
border-bottom: 1px solid #FFF;
}
.tabBox .tabs li.selected {
z-index: 3;
}
.tabBox .tabs a {
float: left;
height: 2em;
line-height: 2em;
-webkit-border-radius: 8px 8px 0 0;
-moz-border-radius: 8px 8px 0 0;
border-radius: 8px 8px 0 0;
background: #EEE;
border: 1px solid #CCC;
border-bottom: 0;
padding: 0 10px;
color: #000;
text-decoration: none;
/* applied by script instead so it can be toggled dynamically... behavior: url(../build/PIE.htc); */
}
.tabBox .tabs .selected a {
background: #FFF;
-webkit-box-shadow: #CCC 0 0 .25em;
-moz-box-shadow: #CCC 0 0 .25em;
box-shadow: #CCC 0 0 .25em;
}
.tabBox .tabs a:hover {
background: -webkit-gradient(linear, 0 0, 0 70%, from(#EEF), to(#FFF));
background: -moz-linear-gradient(#EEF, #FFF 70%);
background: linear-gradient(#EEF, #FFF 70%);
-pie-background: linear-gradient(#EEF, #FFF 70%);
}
.tabBox .content {
clear: left;
position: relative;
z-index: 2;
padding: 2em 1em;
border: 1px solid #CCC;
background: #FFF;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: #CCC 0 0 .25em;
-moz-box-shadow: #CCC 0 0 .25em;
box-shadow: #CCC 0 0 .25em;
/* applied by script instead so it can be toggled dynamically... behavior: url(../build/PIE.htc); */
}
.tabBox .content p {
margin: 0;
}
</style>
</head>
<body>
<h1>CSS3 PIE Demo: Tabs</h1>
<section class="explain">
<h2>Explanation</h2>
<p>This example demonstrates a common tabbed interface, styled only with CSS3 (no images are used). The tabs
don't actually do anything, as that would require extra JavaScript beyond the scope of this demo.</p>
<p>In this demo <code>border-radius</code> is used to give the tabs rounded corners on the top. Also, <code>box-shadow</code>
gives the active tab and the content container a subtle glow, which creates a sense of depth and makes the inactive
tabs look like they are sliding behind the content box. The tabs have a hover effect using a linear gradient.</p>
</section>
<section class="control">
<h2>Screenshot</h2>
<p class="desc">This is a screenshot of the intended rendering, captured in Firefox.</p>
<img src="tabs-control.png" alt="Rendering in Firefox" />
</section>
<section class="demo">
<h2>Live Demo</h2>
<p class="desc">This is the live code as rendered by your browser. If you use IE, you can toggle the PIE behavior on and off.</p>
<div class="tabBox">
<ul class="tabs">
<li class="selected"><a href="#">Tab One</a></li>
<li><a href="#">Tab Two</a></li>
<li><a href="#">Tab Three</a></li>
</ul>
<div class="content">
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
<!--[if lt IE 9]>
<p>
<input type="checkbox" id="togglePIE" checked="checked" data-target=".demo .tabs a, .demo .content" />
<label for="togglePIE">Toggle PIE behavior</label>
</p>
<![endif]-->
</section>
<section class="code">
<h2>Code</h2>
<div class="html">
<h3>HTML markup</h3>
<pre><code>&lt;div class="tabBox">
&lt;ul class="tabs">
&lt;li class="selected">&lt;a href="#">Tab One&lt;/a>&lt;/li>
&lt;li>&lt;a href="#">Tab Two&lt;/a>&lt;/li>
&lt;li>&lt;a href="#">Tab Three&lt;/a>&lt;/li>
&lt;/ul>
&lt;div class="content">
&lt;p>Lorem ipsum dolor sit amet&lt;/p>
&lt;/div>
&lt;/div></code></pre>
</div>
<div class="css">
<h3>CSS</h3>
<pre><code>.tabBox .tabs {
margin: 0;
padding: 0 10px;
overflow: hidden;
margin-bottom: -1px;
height: 2.25em;
}
.tabBox .tabs li {
float: left;
list-style: none;
margin: 0;
padding: .25em .25em 0;
height: 2em;
overflow: hidden;
position: relative;
z-index: 1;
border-bottom: 1px solid #FFF;
}
.tabBox .tabs li.selected {
z-index: 3;
}
.tabBox .tabs a {
float: left;
height: 2em;
line-height: 2em;
-webkit-border-radius: 8px 8px 0 0;
-moz-border-radius: 8px 8px 0 0;
border-radius: 8px 8px 0 0;
background: #EEE;
border: 1px solid #CCC;
border-bottom: 0;
padding: 0 10px;
color: #000;
text-decoration: none;
behavior: url(PIE.htc);
}
.tabBox .tabs .selected a {
background: #FFF;
-webkit-box-shadow: #CCC 0 0 .25em;
-moz-box-shadow: #CCC 0 0 .25em;
box-shadow: #CCC 0 0 .25em;
}
.tabBox .tabs a:hover {
background: -webkit-gradient(linear, 0 0, 0 70%, from(#EEF), to(#FFF));
background: -moz-linear-gradient(#EEF, #FFF 70%);
background: linear-gradient(#EEF, #FFF 70%);
-pie-background: linear-gradient(#EEF, #FFF 70%);
}
.tabBox .content {
clear: left;
position: relative;
z-index: 2;
padding: 2em 1em;
border: 1px solid #CCC;
background: #FFF;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: #CCC 0 0 .25em;
-moz-box-shadow: #CCC 0 0 .25em;
box-shadow: #CCC 0 0 .25em;
behavior: url(PIE.htc);
}</code></pre>
</div>
</section>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.