Snap Builder HTML5 CSS3 Free Public Codes Library


<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<title>CSS Tabs View Radio Buttons & CSS3 Selectors</title>

<style type="text/css">
/* Begin CSS Tabs View Radio Buttons & CSS3 Selectors */
/* == This Script Free To Use Providing This Notice Remains == */
/* == This Script Has Been Found In The https://snapbuilder.com Free Public Codes Library == */
/* == NOTICE:Though This Material May Have Been In A Public Depository, Certain Author Copyright Restrictions May Apply == */
/* == Created by: Cami : https://developer.mozilla.org/en-US/profiles/cami : Creative Commons License == */
.tab-container{position:relative;}
.tab-container .tab-radio{display:none;}
.tab-container .tab
{
display:block;
width:1.5em;
height:2.5ex;
float:left;
position:relative;
top:0px;
-moz-border-top-left-radius:1ex;
-ms-border-top-left-radius:1ex;
-o-border-top-left-radius:1ex;
-webkit-border-top-left-radius:1ex;
border-top-left-radius:1ex;
-moz-border-top-right-radius:1ex;
-ms-border-top-right-radius:1ex;
-o-border-top-right-radius:1ex;
-webkit-border-top-right-radius:1ex;
border-top-right-radius:1ex;
background:-moz-linear-gradient(top, rgb(240,240,240) 0%, rgb(210,210,210) 100% );
background:-ms-linear-gradient(top, rgb(240,240,240) 0%, rgb(210,210,210) 100% );
background:-o-linear-gradient(top, rgb(240,240,240) 0%, rgb(210,210,210) 100% );
background:-webkit-linear-gradient(top, rgb(240,240,240) 0%, rgb(210,210,210) 100% );
background:linear-gradient(top, rgb(240,240,240) 0%, rgb(210,210,210) 100% );
border-left:thin solid #888;
border-right:thin solid #fff;
color:#888;
margin:0ex;
padding:0.5ex;
text-decoration:none;
text-align:center;
cursor:pointer;
font:inherit;
border-bottom:1px solid #888;
}
.tab-container .tab-radio:checked ~ .tab,
.tab-container .tab-radio:active ~ .tab
{
background:-moz-linear-gradient(top, rgb(240,240,240) 0%, rgb(255,255,255) 100% );
background:-ms-linear-gradient(top, rgb(240,240,240) 0%, rgb(255,255,255) 100% );
background:-o-linear-gradient(top, rgb(240,240,240) 0%, rgb(255,255,255) 100% );
background:-webkit-linear-gradient(top, rgb(240,240,240) 0%, rgb(255,255,255) 100% );
background:linear-gradient(top, rgb(240,240,240) 0%, rgb(255,255,255) 100% );
z-index:100;
border-bottom:2px solid #fff;
}
.tab-container .tab-radio:checked ~ .tab{width:4em;}
.tab-container .tab-radio:checked ~ .tab:before{content:"";}
.tab-container .tab-radio:checked ~ .tab:before{content:"Page-";} /* change this tab text to your needs */
.tab-container .tab-page
{
visibility:hidden;
z-index:50;
background-color:#fff;
color:black;
display:block;
position:absolute;
top:3.475ex;
left:0px;
height:22em;
width:67ex;
float:left;
padding:0.5em;
margin:0ex;
border:thin solid #888;
-moz-box-shadow:0.5ex 0.5ex 1ex #888;
-ms-box-shadow:0.5ex 0.5ex 1ex #888;
-o-box-shadow:0.5ex 0.5ex 1ex #888;
-webkit-box-shadow:0.5ex 0.5ex 1ex #888;
box-shadow:0.5ex 0.5ex 1ex #888;
-moz-transition:visibility 0s ease-out 0.3s;
-ms-transition:visibility 0s ease-out 0.3s;
-o-transition:visibility 0s ease-out 0.3s;
-webkit-transition:visibility 0s ease-out 0.3s;
transition:visibility 0s ease-out 0.3s;
}
.tab-container .tab-radio:checked ~ .tab-page{visibility:visible;}
.tab-container .tab-page > *
{
-moz-opacity:0;
-ms-opacity:0;
-o-opacity:0;
-webkit-opacity:0;
opacity:0;
-moz-transition:opacity 0.3s ease-out 0s;
-ms-transition:opacity 0.3s ease-out 0s;
-o-transition:opacity 0.3s ease-out 0s;
-webkit-transition:opacity 0.3s ease-out 0s;
transition:opacity 0.3s ease-out 0s;
}
.tab-container .tab-radio:checked ~ .tab-page > *
{
-moz-opacity:1;
-ms-opacity:1;
-o-opacity:1;
-webkit-opacity:1;
opacity:1;
-moz-transition:opacity 0.3s ease-in 0.15s;
-ms-transition:opacity 0.3s ease-in 0.15s;
-o-transition:opacity 0.3s ease-in 0.15s;
-webkit-transition:opacity 0.3s ease-in 0.15s;
transition:opacity 0.3s ease-in 0.15s;
}
/* this is just eye candy */
.tab-container .tab-page .pageno{text-align:center;position:absolute;bottom:0px;width:100%;}
.tab-container .tab-page h1 + p::first-letter {font-size:300%; float:left;}
</style>

<style>
/* not part of the code below */
body{font-family:arial, verdana, tahoma;color:#000;background-color:#ffffff;}
.notes{font-family:arial, verdana, tahoma;color:#000;text-align:center;}
</style>

</head>
<body>

<h1>CSS Tabs View Radio Buttons & CSS3 Selectors</h1>

<br /><br />
<div class="notes">Click the tab icons below to preview the effect.</div>

<br /><br />
<div class="notes">
[ This code example from <a href="http://snapbuilder.com/code_snippets/copy_code_snippet_258.html">CSS Tabs View Radio Buttons & CSS3 Selectors Code Snippet</a> page. ]
</div>

<div class="tab-container">
<label class="tab-label">
<input class="tab-radio" type="radio" name="page" value="page1" checked="checked"/>
<h2 class="tab">1</h2>
<div class="tab-page" id="page1">
<h1>An H1 tag</h1>
<p>This is some rambling text created solely for the purpose of demonstrating this code snippet. This is some rambling text created solely for the purpose of demonstrating this code snippet. This is some rambling text created solely for the purpose of demonstrating this code snippet. This is some rambling text created solely for the purpose of demonstrating this code snippet.</p>
<p class="pageno">1</p>
</div>
</label>
<label class="tab-label">
<input class="tab-radio" type="radio" name="page" value="page2" />
<h2 class="tab">2</h2>
<div class="tab-page" id="page1">
<p>This is some rambling text created solely for the purpose of demonstrating this code snippet. This is some rambling text created solely for the purpose of demonstrating this code snippet. This is some rambling text created solely for the purpose of demonstrating this code snippet. This is some rambling text created solely for the purpose of demonstrating this code snippet.</p>
<p class="pageno">2</p>
</div>
</label>
<label class="tab-label">
<input class="tab-radio" type="radio" name="page" value="page3" />
<h2 class="tab">3</h2>
<div class="tab-page" id="page1">
<p>This is some rambling text created solely for the purpose of demonstrating this code snippet. This is some rambling text created solely for the purpose of demonstrating this code snippet. This is some rambling text created solely for the purpose of demonstrating this code snippet. This is some rambling text created solely for the purpose of demonstrating this code snippet.</p>
<p class="pageno">3</p>
</div>
</label>
<label class="tab-label">
<input class="tab-radio" type="radio" name="page" value="page4" />
<h2 class="tab">4</h2>
<div class="tab-page" id="page1">
<p>This is some rambling text created solely for the purpose of demonstrating this code snippet. This is some rambling text created solely for the purpose of demonstrating this code snippet. This is some rambling text created solely for the purpose of demonstrating this code snippet. This is some rambling text created solely for the purpose of demonstrating this code snippet.</p>
<p class="pageno">4</p>
</div>
</label>
</div>

</body>
</html>