Pure CSS Tabbed Window (No Script)

* { margin:0; padding:0; }
body { background:#fff; font:14px Arial, Helvetica, sans-serif; }
#page-wrap { width:500px; margin:0px auto; }
.tabs { position:relative; min-height:200px; /* This part sucks */ clear:both; margin:25px 0; }
.tab { float:left; }
.tab label { background:#Ff0; padding:10px; border:1px solid #ccc; margin-left:-1px; position:relative; left:1px; }
.tab [type=radio] { display:none; }
.content { position:absolute; top:28px; left:0; background:#FC0; right:0; bottom:0; padding:20px; border:1px solid #F90; height:250px;}
.content1 { position:absolute; top:28px; left:0; background:#09F; right:0; bottom:0; padding:20px; border:1px solid #06F;height:250px; }
.content2 { position:absolute; top:28px; left:0; background:#C6C; right:0; bottom:0; padding:20px; border:1px solid #939; height:250px;}
[type=radio]:checked ~ label { background:white; border-bottom:1px solid white; z-index:2; }
[type=radio]:checked ~ label ~ .content { z-index:1; }
[type=radio]:checked ~ label ~ .content1 { z-index:1; }
[type=radio]:checked ~ label ~ .content2 { z-index:1; }
img { margin:10px; border:3px solid #FFF;}

<div id="page-wrap"><h2>Pure CSS Tabbed Window (No Script)</h2>
<div class="tabs">
<div class="tab">
<input type="radio" id="tab-4" name="tab-group-2" checked>
<label for="tab-4">Tab One</label>
<div class="content">
<p><img src="mp3.jpg" align="left">This event is raised when the element local timeline begins to play. It will be raised each time the element begins the active duration (i.e. when it restarts, but not when it repeats). It may be raised both in the course of normal (i.e. scheduled or interactive) timeline play, as well as in the case that the element was begun with the beginElement or beginElementAt methods. Note that if an element is restarted while it is currently playing, the element will raise an end event and another begin event, as the element restarts.
</p>
</div>
</div>
<div class="tab">
<input type="radio" id="tab-5" name="tab-group-2">
<label for="tab-5">Tab Two</label>
<div class="content1">
<p><img src="mp3.jpg" align="left">Wix.com lets everyone easily design HTML5 websites using an intuitive drag n' drop builder. Pick any of our beautiful mobile-optimized templates. Customize anything and get online instantly! Wix gives you everything you need in one place - reliable hosting, full support, SEO tools and more.
Wix.com lets everyone easily design HTML5 websites using an intuitive drag n' drop builder. Pick any of our beautiful mobile-optimized templates. Customize anything and get online instantly! Wix gives you everything you need in one place - reliable hosting, full support, SEO tools and more.
</p>
</div>
</div>
<div class="tab">
<input type="radio" id="tab-6" name="tab-group-2">
<label for="tab-6">Tab Three</label>
<div class="content2">
<p><img src="mp3.jpg" align="left">Unlike other SVG DOM interfaces, the SVG DOM does not specify convenience DOM properties corresponding to the various language attributes on SVG's animation elements. Specification of these convenience properties in a way that will be compatible with future versions of SMIL Animation is expected in a future version of SVG. The current method for accessing and modifying the attributes on the animation elements is to use the standard
</p>
</div>
</div>
</div>
</div>

Tagged in:

• TAB window css3
• tabbed window css3
• css3 tab window
• css3 tabbed are