Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Newer
Older
100644 280 lines (237 sloc) 7.631 kb
22531ca Add demo for tabbed interface
Jason Johnston authored
1 <!DOCTYPE html>
2 <html>
3 <head>
4
5 <meta content="text/html; charset=UTF-8" http-equiv="content-type">
6 <title>CSS3 PIE Demo: Tabs</title>
7
8 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
9
10 <!--[if lt IE 9]>
11 <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
12 <![endif]-->
13
14 <script type="text/javascript">
15 $( function() {
16 var cb = $( '#togglePIE' );
17 if( !cb[0].addBehavior ) return; //IE only
18
19 function togglePIE() {
20 $( cb[0].getAttribute( 'data-target' ) ).each( function() {
21 if( cb.is(":checked") ) {
22 if( !this.behaviorId ) {
23 this.behaviorId = this.addBehavior( '../build/PIE.htc' );
24 }
25 }
26 else if( this.behaviorId ) {
27 this.removeBehavior( this.behaviorId );
28 this.behaviorId = null;
29 }
30 } );
31 }
32
33 cb.change( togglePIE );
34 togglePIE();
35 } );
36 </script>
37
38
39 <style type="text/css">
40
41 /* Page styles */
42
43 body {
44 font-size: 12px;
45 font-family: sans-serif;
46 }
47
48 section {
49 display: block;
50 }
51
52 .control, .demo {
53 border: 1px solid #CCC;
54 padding: 10px;
55 margin: 2em 0;
56 float: left;
02f5dfe Decrease width of demo boxes to fit in site design
Jason Johnston authored
57 width: 275px;
22531ca Add demo for tabbed interface
Jason Johnston authored
58 height: 250px;
59 }
60 .control {
61 margin-right: 1em;
62 }
63
64 .control .desc, .demo .desc {
65 height: 4em;
66 }
67
68 .code {
69 clear: both;
70 }
71
72 .code pre {
73 background: #EEE;
74 padding: 10px;
75 }
76
77
78
79 /* Demo styles */
80
81 .tabBox {
82 padding: 0 3px;
83 font-size: 12px;
84 font-family: sans-serif;
85 }
86
87 .tabBox .tabs {
88 margin: 0;
89 padding: 0 10px;
90 overflow: hidden;
91 margin-bottom: -1px;
92 }
93 .tabBox .tabs li {
94 float: left;
95 list-style: none;
96 margin: 0;
97 padding: 3px 3px 0;
98 overflow: hidden;
99 position: relative;
100 z-index: 1;
101 }
102 .tabBox .tabs li.selected {
103 z-index: 3;
104 }
105 .tabBox .tabs a {
106 float: left;
107 -webkit-border-radius: 8px 8px 0 0;
108 -moz-border-radius: 8px 8px 0 0;
109 border-radius: 8px 8px 0 0;
110 background: #EEE;
111 border: 1px solid #CCC;
112 padding: 4px 10px;
113 color: #000;
114 text-decoration: none;
115 /* applied by script instead so it can be toggled dynamically... behavior: url(../build/PIE.htc); */
116 }
117 .tabBox .tabs .selected a {
118 background: #FFF;
119 border-bottom-color: #FFF;
120 -webkit-box-shadow: #CCC 0 0 3px;
121 -moz-box-shadow: #CCC 0 0 3px;
122 box-shadow: #CCC 0 0 3px;
123 }
124
125 .tabBox .tabs a:hover {
126 background: -webkit-gradient(linear, 0 0, 0 70%, from(#EEF), to(#FFF));
127 background: -moz-linear-gradient(#EEF, #FFF 70%);
128 -pie-background: linear-gradient(#EEF, #FFF 70%);
129 }
130
131 .tabBox .content {
132 clear: left;
133 position: relative;
134 z-index: 2;
135 padding: 2em 1em;
136 border: 1px solid #CCC;
137 background: #FFF;
138 -webkit-border-radius: 3px;
139 -moz-border-radius: 3px;
140 border-radius: 3px;
141 -webkit-box-shadow: #CCC 0 0 3px;
142 -moz-box-shadow: #CCC 0 0 3px;
143 box-shadow: #CCC 0 0 3px;
144 /* applied by script instead so it can be toggled dynamically... behavior: url(../build/PIE.htc); */
145 }
146 .tabBox .content p {
147 margin: 0;
148 }
149 </style>
150
151 </head>
152 <body>
153
154 <h1>CSS3 PIE Demo: Tabs</h1>
155
156
157 <section class="explain">
158 <h2>Explanation</h2>
159 <p>This example demonstrates a common tabbed interface, styled only with CSS3 (no images are used). It uses
160 <code>border-radius</code> to give the tabs rounded corners. Also, <code>box-shadow</code> is used to give the
161 active tab and the content container a subtle drop shadow, which creates a sense of depth and makes the inactive
162 tabs look like they are sliding behind the content box. The tabs have a hover effect using a linear gradient.</p>
163 </section>
164
165
166 <section class="control">
167 <h2>Screenshot</h2>
168 <p class="desc">This is a screenshot of the intended rendering, captured in Firefox.</p>
169
170 <img src="tabs-control.png" alt="Rendering in Firefox" />
171 </section>
172
173 <section class="demo">
174 <h2>Live Demo</h2>
175 <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>
176
177 <div class="tabBox">
178 <ul class="tabs">
179 <li class="selected"><a href="#">Tab One</a></li>
180 <li><a href="#">Tab Two</a></li>
181 <li><a href="#">Tab Three</a></li>
182 </ul>
183 <div class="content">
184 <p>Lorem ipsum dolor sit amet</p>
185 </div>
186 </div>
187
188 <!--[if lt IE 9]>
189 <p>
190 <input type="checkbox" id="togglePIE" checked="checked" data-target=".demo .tabs a, .demo .content" />
191 <label for="togglePIE">Toggle PIE behavior</label>
192 </p>
193 <![endif]-->
194 </section>
195
196 <section class="code">
197 <h2>Code</h2>
198
199 <div class="html">
200 <h3>HTML markup</h3>
201 <pre><code>&lt;div class="tabBox">
202 &lt;ul class="tabs">
203 &lt;li class="selected">&lt;a href="#">Tab One&lt;/a>&lt;/li>
204 &lt;li>&lt;a href="#">Tab Two&lt;/a>&lt;/li>
205 &lt;li>&lt;a href="#">Tab Three&lt;/a>&lt;/li>
206 &lt;/ul>
207 &lt;div class="content">
208 &lt;p>Lorem ipsum dolor sit amet&lt;/p>
209 &lt;/div>
210 &lt;/div></code></pre>
211 </div>
212
213 <div class="css">
214 <h3>CSS</h3>
215 <pre><code>.tabBox .tabs {
216 margin: 0;
217 padding: 0 10px;
218 overflow: hidden;
219 margin-bottom: -1px;
220 }
221
222 .tabBox .tabs li {
223 float: left;
224 list-style: none;
225 margin: 0;
226 padding: 3px 3px 0;
227 overflow: hidden;
228 position: relative;
229 z-index: 1;
230 }
231
232 .tabBox .tabs li.selected {
233 z-index: 3;
234 }
235
236 .tabBox .tabs a {
237 float: left;
238 background: #EEE;
239 border: 1px solid #CCC;
240 padding: 4px 10px;
241 color: #000;
242 text-decoration: none;
243 behavior: url(PIE.htc);
244 }
245
246 .tabBox .tabs .selected a {
247 background: #FFF;
248 border-bottom-color: #FFF;
249 -webkit-box-shadow: #CCC 0 0 3px;
250 -moz-box-shadow: #CCC 0 0 3px;
251 box-shadow: #CCC 0 0 3px;
252 }
253
254 .tabBox .tabs a:hover {
255 background: -webkit-gradient(linear, 0 0, 0 70%, from(#EEF), to(#FFF));
256 background: -moz-linear-gradient(#EEF, #FFF 70%);
257 -pie-background: linear-gradient(#EEF, #FFF 70%);
258 }
259
260 .tabBox .content {
261 clear: left;
262 position: relative;
263 z-index: 2;
264 padding: 2em 1em;
265 border: 1px solid #CCC;
266 background: #FFF;
267 -webkit-border-radius: 3px;
268 -moz-border-radius: 3px;
269 border-radius: 3px;
270 -webkit-box-shadow: #CCC 0 0 3px;
271 -moz-box-shadow: #CCC 0 0 3px;
272 box-shadow: #CCC 0 0 3px;
273 behavior: url(PIE.htc);
274 }</code></pre>
275 </div>
276 </section>
277
278
279 </body>
280 </html>
Something went wrong with that request. Please try again.