Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

302 lines (259 sloc) 8.608 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: -webkit-linear-gradient(#EEF, #FFF 70%);
background: -moz-linear-gradient(#EEF, #FFF 70%);
background: -ms-linear-gradient(#EEF, #FFF 70%);
background: -o-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: -webkit-linear-gradient(#EEF, #FFF 70%);
background: -moz-linear-gradient(#EEF, #FFF 70%);
background: -ms-linear-gradient(#EEF, #FFF 70%);
background: -o-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.