Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Newer
Older
100644 296 lines (253 sloc) 8.26 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' );
3d8013d Some bug fixes and polish in the tabs demo
Jason Johnston authored
17 if( !( cb[0] && cb[0].addBehavior ) ) return; //IE only
22531ca Add demo for tabbed interface
Jason Johnston authored
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;
3d8013d Some bug fixes and polish in the tabs demo
Jason Johnston authored
92 height: 2.25em;
22531ca Add demo for tabbed interface
Jason Johnston authored
93 }
94 .tabBox .tabs li {
95 float: left;
96 list-style: none;
97 margin: 0;
3d8013d Some bug fixes and polish in the tabs demo
Jason Johnston authored
98 padding: .25em .25em 0;
99 height: 2em;
22531ca Add demo for tabbed interface
Jason Johnston authored
100 overflow: hidden;
101 position: relative;
102 z-index: 1;
3d8013d Some bug fixes and polish in the tabs demo
Jason Johnston authored
103 border-bottom: 1px solid #FFF;
22531ca Add demo for tabbed interface
Jason Johnston authored
104 }
105 .tabBox .tabs li.selected {
106 z-index: 3;
107 }
108 .tabBox .tabs a {
109 float: left;
3d8013d Some bug fixes and polish in the tabs demo
Jason Johnston authored
110 height: 2em;
111 line-height: 2em;
22531ca Add demo for tabbed interface
Jason Johnston authored
112 -webkit-border-radius: 8px 8px 0 0;
113 -moz-border-radius: 8px 8px 0 0;
114 border-radius: 8px 8px 0 0;
115 background: #EEE;
116 border: 1px solid #CCC;
3d8013d Some bug fixes and polish in the tabs demo
Jason Johnston authored
117 border-bottom: 0;
118 padding: 0 10px;
22531ca Add demo for tabbed interface
Jason Johnston authored
119 color: #000;
120 text-decoration: none;
121 /* applied by script instead so it can be toggled dynamically... behavior: url(../build/PIE.htc); */
122 }
123 .tabBox .tabs .selected a {
124 background: #FFF;
3d8013d Some bug fixes and polish in the tabs demo
Jason Johnston authored
125 -webkit-box-shadow: #CCC 0 0 .25em;
126 -moz-box-shadow: #CCC 0 0 .25em;
127 box-shadow: #CCC 0 0 .25em;
22531ca Add demo for tabbed interface
Jason Johnston authored
128 }
129
130 .tabBox .tabs a:hover {
131 background: -webkit-gradient(linear, 0 0, 0 70%, from(#EEF), to(#FFF));
132 background: -moz-linear-gradient(#EEF, #FFF 70%);
3d8013d Some bug fixes and polish in the tabs demo
Jason Johnston authored
133 background: linear-gradient(#EEF, #FFF 70%);
22531ca Add demo for tabbed interface
Jason Johnston authored
134 -pie-background: linear-gradient(#EEF, #FFF 70%);
135 }
136
137 .tabBox .content {
138 clear: left;
139 position: relative;
140 z-index: 2;
141 padding: 2em 1em;
142 border: 1px solid #CCC;
143 background: #FFF;
144 -webkit-border-radius: 3px;
145 -moz-border-radius: 3px;
146 border-radius: 3px;
3d8013d Some bug fixes and polish in the tabs demo
Jason Johnston authored
147 -webkit-box-shadow: #CCC 0 0 .25em;
148 -moz-box-shadow: #CCC 0 0 .25em;
149 box-shadow: #CCC 0 0 .25em;
22531ca Add demo for tabbed interface
Jason Johnston authored
150 /* applied by script instead so it can be toggled dynamically... behavior: url(../build/PIE.htc); */
151 }
152 .tabBox .content p {
153 margin: 0;
154 }
155 </style>
156
157 </head>
158 <body>
159
160 <h1>CSS3 PIE Demo: Tabs</h1>
161
162
163 <section class="explain">
164 <h2>Explanation</h2>
3d8013d Some bug fixes and polish in the tabs demo
Jason Johnston authored
165 <p>This example demonstrates a common tabbed interface, styled only with CSS3 (no images are used). The tabs
166 don't actually do anything, as that would require extra JavaScript beyond the scope of this demo.</p>
167 <p>In this demo <code>border-radius</code> is used to give the tabs rounded corners on the top. Also, <code>box-shadow</code>
168 gives the active tab and the content container a subtle glow, which creates a sense of depth and makes the inactive
22531ca Add demo for tabbed interface
Jason Johnston authored
169 tabs look like they are sliding behind the content box. The tabs have a hover effect using a linear gradient.</p>
170 </section>
171
172
173 <section class="control">
174 <h2>Screenshot</h2>
175 <p class="desc">This is a screenshot of the intended rendering, captured in Firefox.</p>
176
177 <img src="tabs-control.png" alt="Rendering in Firefox" />
178 </section>
179
180 <section class="demo">
181 <h2>Live Demo</h2>
182 <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>
183
184 <div class="tabBox">
185 <ul class="tabs">
186 <li class="selected"><a href="#">Tab One</a></li>
187 <li><a href="#">Tab Two</a></li>
188 <li><a href="#">Tab Three</a></li>
189 </ul>
190 <div class="content">
191 <p>Lorem ipsum dolor sit amet</p>
192 </div>
193 </div>
194
195 <!--[if lt IE 9]>
196 <p>
197 <input type="checkbox" id="togglePIE" checked="checked" data-target=".demo .tabs a, .demo .content" />
198 <label for="togglePIE">Toggle PIE behavior</label>
199 </p>
200 <![endif]-->
201 </section>
202
203 <section class="code">
204 <h2>Code</h2>
205
206 <div class="html">
207 <h3>HTML markup</h3>
208 <pre><code>&lt;div class="tabBox">
209 &lt;ul class="tabs">
210 &lt;li class="selected">&lt;a href="#">Tab One&lt;/a>&lt;/li>
211 &lt;li>&lt;a href="#">Tab Two&lt;/a>&lt;/li>
212 &lt;li>&lt;a href="#">Tab Three&lt;/a>&lt;/li>
213 &lt;/ul>
214 &lt;div class="content">
215 &lt;p>Lorem ipsum dolor sit amet&lt;/p>
216 &lt;/div>
217 &lt;/div></code></pre>
218 </div>
219
220 <div class="css">
221 <h3>CSS</h3>
222 <pre><code>.tabBox .tabs {
223 margin: 0;
224 padding: 0 10px;
225 overflow: hidden;
226 margin-bottom: -1px;
3d8013d Some bug fixes and polish in the tabs demo
Jason Johnston authored
227 height: 2.25em;
22531ca Add demo for tabbed interface
Jason Johnston authored
228 }
229
230 .tabBox .tabs li {
231 float: left;
232 list-style: none;
233 margin: 0;
3d8013d Some bug fixes and polish in the tabs demo
Jason Johnston authored
234 padding: .25em .25em 0;
235 height: 2em;
22531ca Add demo for tabbed interface
Jason Johnston authored
236 overflow: hidden;
237 position: relative;
238 z-index: 1;
3d8013d Some bug fixes and polish in the tabs demo
Jason Johnston authored
239 border-bottom: 1px solid #FFF;
22531ca Add demo for tabbed interface
Jason Johnston authored
240 }
241
242 .tabBox .tabs li.selected {
243 z-index: 3;
244 }
245
246 .tabBox .tabs a {
247 float: left;
3d8013d Some bug fixes and polish in the tabs demo
Jason Johnston authored
248 height: 2em;
249 line-height: 2em;
250 -webkit-border-radius: 8px 8px 0 0;
251 -moz-border-radius: 8px 8px 0 0;
252 border-radius: 8px 8px 0 0;
22531ca Add demo for tabbed interface
Jason Johnston authored
253 background: #EEE;
254 border: 1px solid #CCC;
3d8013d Some bug fixes and polish in the tabs demo
Jason Johnston authored
255 border-bottom: 0;
256 padding: 0 10px;
22531ca Add demo for tabbed interface
Jason Johnston authored
257 color: #000;
258 text-decoration: none;
259 behavior: url(PIE.htc);
260 }
261
262 .tabBox .tabs .selected a {
263 background: #FFF;
3d8013d Some bug fixes and polish in the tabs demo
Jason Johnston authored
264 -webkit-box-shadow: #CCC 0 0 .25em;
265 -moz-box-shadow: #CCC 0 0 .25em;
266 box-shadow: #CCC 0 0 .25em;
22531ca Add demo for tabbed interface
Jason Johnston authored
267 }
268
269 .tabBox .tabs a:hover {
270 background: -webkit-gradient(linear, 0 0, 0 70%, from(#EEF), to(#FFF));
271 background: -moz-linear-gradient(#EEF, #FFF 70%);
3d8013d Some bug fixes and polish in the tabs demo
Jason Johnston authored
272 background: linear-gradient(#EEF, #FFF 70%);
22531ca Add demo for tabbed interface
Jason Johnston authored
273 -pie-background: linear-gradient(#EEF, #FFF 70%);
274 }
275
276 .tabBox .content {
277 clear: left;
278 position: relative;
279 z-index: 2;
280 padding: 2em 1em;
281 border: 1px solid #CCC;
282 background: #FFF;
283 -webkit-border-radius: 3px;
284 -moz-border-radius: 3px;
285 border-radius: 3px;
3d8013d Some bug fixes and polish in the tabs demo
Jason Johnston authored
286 -webkit-box-shadow: #CCC 0 0 .25em;
287 -moz-box-shadow: #CCC 0 0 .25em;
288 box-shadow: #CCC 0 0 .25em;
22531ca Add demo for tabbed interface
Jason Johnston authored
289 behavior: url(PIE.htc);
290 }</code></pre>
291 </div>
292 </section>
293
294
295 </body>
296 </html>
Something went wrong with that request. Please try again.