ziemekpr0/z0 CSS Facebook Slider

## z0 CSS Facebook Slider
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>z0 </title>
	<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<style>


/* reset */
.z0, .z0 * {
	padding: 0;
	margin: 0;
}

input.z0-inputs {
	display: none;
}

.z0 {
	list-style: none;
	position: fixed;
	z-index: 999;
	margin: auto;
	top: 0; left: auto; bottom: 0; right: -300px;

	width: 300px;

	-moz-transition: 1s;
	-ms-transition: 1s;
	-o-transition: 1s;
	-webkit-transition: 1s;
	transition: 1s;
}

.z0:hover {
	right: 0;
}

.z0-icons-container {
	box-sizing: border-box;
	margin: auto;
	position: absolute;
	top: 0; left: -70px; bottom: 0; right: auto;

	width: 70px; /* szerokosc ikony */
	height: 184px; /*3 ikony*/
	overflow: hidden;
}

.z0-icons{
	list-style: none;

	position: relative;
	left: 0;
	top: 0;

	-moz-transition: 0.6s;
	-ms-transition: 0.6s;
	-o-transition: 0.6s;
	-webkit-transition: 0.6s;
	transition: 0.6s;

}
.z0-icons li {
	line-height: 0;
	display: block;
	text-align: right;
	width: 64px;
}
.z0-icons li i {
	font-size: 20px;
	display: inline-block;
	width: 26px;
	height: 26px;
	line-height: 26px;
	text-align: center;
	padding: 10px;
	border-radius: 50%;
	background: #fff;
	border: solid #ddd 2px;
	margin: 4px;

	/* 26 + 28 + 8 + 2 = 64 */
	/* 20 hover */
	/* 2 * 56 + 64 = 184px */

	-moz-transition: 0.3s;
	-ms-transition: 0.3s;
	-o-transition: 0.3s;
	-webkit-transition: 0.3s;
	transition: 0.3s;

}

.z0-icons > label{
	display: block;
}

 .z0-tabs-container{
	background: #fff;
	border: solid #000 3px;
	border-radius: 5px 0 0 5px;
	border-right: none;
	overflow: hidden;
	position: absolute;
	margin: auto;
	top: 0; left: 0; bottom: 0; right: 0;

	height: 300px;

	-webkit-transition:0.5s;
	-moz-transition:0.5s;
	-ms-transition:0.5s;
	-o-transition:0.5s;
	transition:0.5s;

	box-shadow: 3px 2px 5px rgba(0,0,0,0.7);
 }

.z0-tab {
	/*margin: 10px 12px;*/
	/*Efekt 0. Ukryj/pokaz*/
	/*display: none;*/

	/*Efekt 1. Fade*/
	opacity:0; filter:
	alpha(opacity=0);
	z-index:90;

	-webkit-transition:1s;
	-moz-transition:1s;
	-ms-transition:1s;
	-o-transition:1s;
	transition:1s;
	position: absolute;
	background: #fff;
	height: 100%;
	padding: 10px;
}

#z0-tab-1:checked ~ .z0-tabs-container{
	height: 250px;
}

#z0-tab-2:checked ~ .z0-tabs-container{
	height: 320px;
}

#z0-tab-3:checked ~ .z0-tabs-container{
	height: 320px;
}

#z0-tab-4:checked ~ .z0-tabs-container{
	height: 180px;
}

#z0-tab-5:checked ~ .z0-tabs-container{
	height: 400px;
}

#z0-tab-6:checked ~ .z0-tabs-container{
	height: 300px;
}

#z0-tab-7:checked ~ .z0-tabs-container{
	height: 400px;
}

#z0-tab-8:checked ~ .z0-tabs-container{
	height: 500px;
}


/* wysokosc zaladki nieaktywnej */
#z0-tab-1:checked ~ .z0-icons-container .z0-icons {top: 0px;}
#z0-tab-2:checked ~ .z0-icons-container .z0-icons {top: 0px;}
#z0-tab-3:checked ~ .z0-icons-container .z0-icons {top: -58px;}
#z0-tab-4:checked ~ .z0-icons-container .z0-icons {top: -116px;}
#z0-tab-5:checked ~ .z0-icons-container .z0-icons {top: -174px;}
#z0-tab-6:checked ~ .z0-icons-container .z0-icons {top: -232px;}
#z0-tab-7:checked ~ .z0-icons-container .z0-icons {top: -290px;}
#z0-tab-8:checked ~ .z0-icons-container .z0-icons {top: -290px;}

#z0-tab-1:checked ~ .z0-tabs-container .z0-tab-1,
#z0-tab-2:checked ~ .z0-tabs-container .z0-tab-2,
#z0-tab-3:checked ~ .z0-tabs-container .z0-tab-3,
#z0-tab-4:checked ~ .z0-tabs-container .z0-tab-4,
#z0-tab-5:checked ~ .z0-tabs-container .z0-tab-5,
#z0-tab-6:checked ~ .z0-tabs-container .z0-tab-6,
#z0-tab-7:checked ~ .z0-tabs-container .z0-tab-7,
#z0-tab-8:checked ~ .z0-tabs-container .z0-tab-8
{

	/*Efekt 0. Ukryj/pokaz*/
	/*display: block;*/

	/*Efekt 1. Fade*/
	opacity:1;
	filter: alpha(opacity=100);
	z-index:100;
}

#z0-tab-1:checked ~ .z0-icons-container .z0-icons .z0-tab-1 i,
#z0-tab-2:checked ~ .z0-icons-container .z0-icons .z0-tab-2 i,
#z0-tab-3:checked ~ .z0-icons-container .z0-icons .z0-tab-3 i,
#z0-tab-4:checked ~ .z0-icons-container .z0-icons .z0-tab-4 i,
#z0-tab-5:checked ~ .z0-icons-container .z0-icons .z0-tab-5 i,
#z0-tab-6:checked ~ .z0-icons-container .z0-icons .z0-tab-6 i,
#z0-tab-7:checked ~ .z0-icons-container .z0-icons .z0-tab-7 i,
#z0-tab-8:checked ~ .z0-icons-container .z0-icons .z0-tab-8 i
{
	border-color: #000;
	background: #000;
	color: #fff;
	padding: 14px;
	font-size: 26px;
}


/*bg color mods*/

/*#z0-tab-2:checked ~ .z0-tabs-container .z0-tab-2 {
	background: #eee;
}*/

/*border-color-mods*/

#z0-tab-1:checked ~ .z0-tabs-container {
	border-color: #0170cf;
}

#z0-tab-2:checked ~ .z0-tabs-container {
	border-color: #cd3c2a;
}

#z0-tab-3:checked ~ .z0-tabs-container {
	border-color: #07afee;
}

#z0-tab-4:checked ~ .z0-tabs-container {
	border-color: #cd3c2a;
}

.z0-left {
	right: auto;
	left: -300px;
	width: 300px;
}
.z0-left .z0-icons-container {
	right: -70px; left: auto;
}
.z0-left:hover {
	left: 0; right: auto;
}
.z0-left .z0-tabs-container{
	border-right-style: solid;
	border-radius: 0 5px 5px 0;
	border-left: none;
	box-shadow: -3px 2px 5px rgba(0,0,0,0.7);
}

</style>
</head>
<body>

	<div class="z0">

		<input name="z0-inputs" id="z0-tab-1" class="z0-inputs" type="radio" checked="checked">
		<input name="z0-inputs" id="z0-tab-2" class="z0-inputs" type="radio">
		<input name="z0-inputs" id="z0-tab-3" class="z0-inputs" type="radio">
		<input name="z0-inputs" id="z0-tab-4" class="z0-inputs" type="radio">
		<input name="z0-inputs" id="z0-tab-5" class="z0-inputs" type="radio">
		<input name="z0-inputs" id="z0-tab-6" class="z0-inputs" type="radio">
		<input name="z0-inputs" id="z0-tab-7" class="z0-inputs" type="radio">
		<input name="z0-inputs" id="z0-tab-8" class="z0-inputs" type="radio">

		<div class="z0-icons-container">
			<ul class="z0-icons">
				<li><label for="z0-tab-1" class="z0-tab-1"><i class="fa fa-facebook"></i></label></li>
				<li><label for="z0-tab-2" class="z0-tab-2"><i class="fa fa-google-plus"></i></label></li>
				<li><label for="z0-tab-3" class="z0-tab-3"><i class="fa fa-twitter"></i></label></li>
				<li><label for="z0-tab-4" class="z0-tab-4"><i class="fa fa-youtube"></i></label></li>
 				<li><label for="z0-tab-5" class="z0-tab-5"><i class="fa fa-mars"></i></label></li>
				<li><label for="z0-tab-6" class="z0-tab-6"><i class="fa fa-wordpress"></i></label></li>
				<li><label for="z0-tab-7" class="z0-tab-7"><i class="fa fa-rss"></i></label></li>
				<li><label for="z0-tab-8" class="z0-tab-8"><i class="fa fa-github"></i></label></li>
			</ul>
		</div>

		<div class="z0-tabs-container">
			<div class="z0-tab z0-tab-1">Tab 1 content</div>
			<div class="z0-tab z0-tab-2">Tab 2 content</div>
			<div class="z0-tab z0-tab-3">Tab 3 content</div>
			<div class="z0-tab z0-tab-4">Tab 4 content</div>
			<div class="z0-tab z0-tab-5">Tab 5 content</div>
			<div class="z0-tab z0-tab-6">Tab 6 content</div>
			<div class="z0-tab z0-tab-7">Tab 7 content</div>
			<div class="z0-tab z0-tab-8">Tab 8 content</div>
		</div>

	</div>

</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>z0 </title>
	<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
	<style>


	/* reset */
	.z0, .z0 * {
	padding: 0;
	margin: 0;
	}

	input.z0-inputs {
	display: none;
	}

	.z0 {
	list-style: none;
	position: fixed;
	z-index: 999;
	margin: auto;
	top: 0; left: auto; bottom: 0; right: -300px;

	width: 300px;

	-moz-transition: 1s;
	-ms-transition: 1s;
	-o-transition: 1s;
	-webkit-transition: 1s;
	transition: 1s;
	}

	.z0:hover {
	right: 0;
	}

	.z0-icons-container {
	box-sizing: border-box;
	margin: auto;
	position: absolute;
	top: 0; left: -70px; bottom: 0; right: auto;

	width: 70px; /* szerokosc ikony */
	height: 184px; /3 ikony/
	overflow: hidden;
	}

	.z0-icons{
	list-style: none;

	position: relative;
	left: 0;
	top: 0;

	-moz-transition: 0.6s;
	-ms-transition: 0.6s;
	-o-transition: 0.6s;
	-webkit-transition: 0.6s;
	transition: 0.6s;

	}
	.z0-icons li {
	line-height: 0;
	display: block;
	text-align: right;
	width: 64px;
	}
	.z0-icons li i {
	font-size: 20px;
	display: inline-block;
	width: 26px;
	height: 26px;
	line-height: 26px;
	text-align: center;
	padding: 10px;
	border-radius: 50%;
	background: #fff;
	border: solid #ddd 2px;
	margin: 4px;

	/* 26 + 28 + 8 + 2 = 64 */
	/* 20 hover */
	/* 2 * 56 + 64 = 184px */

	-moz-transition: 0.3s;
	-ms-transition: 0.3s;
	-o-transition: 0.3s;
	-webkit-transition: 0.3s;
	transition: 0.3s;

	}

	.z0-icons > label{
	display: block;
	}

	.z0-tabs-container{
	background: #fff;
	border: solid #000 3px;
	border-radius: 5px 0 0 5px;
	border-right: none;
	overflow: hidden;
	position: absolute;
	margin: auto;
	top: 0; left: 0; bottom: 0; right: 0;

	height: 300px;

	-webkit-transition:0.5s;
	-moz-transition:0.5s;
	-ms-transition:0.5s;
	-o-transition:0.5s;
	transition:0.5s;

	box-shadow: 3px 2px 5px rgba(0,0,0,0.7);
	}

	.z0-tab {
	/margin: 10px 12px;/
	/Efekt 0. Ukryj/pokaz/
	/display: none;/

	/Efekt 1. Fade/
	opacity:0; filter:
	alpha(opacity=0);
	z-index:90;

	-webkit-transition:1s;
	-moz-transition:1s;
	-ms-transition:1s;
	-o-transition:1s;
	transition:1s;
	position: absolute;
	background: #fff;
	height: 100%;
	padding: 10px;
	}

	#z0-tab-1:checked ~ .z0-tabs-container{
	height: 250px;
	}

	#z0-tab-2:checked ~ .z0-tabs-container{
	height: 320px;
	}

	#z0-tab-3:checked ~ .z0-tabs-container{
	height: 320px;
	}

	#z0-tab-4:checked ~ .z0-tabs-container{
	height: 180px;
	}

	#z0-tab-5:checked ~ .z0-tabs-container{
	height: 400px;
	}

	#z0-tab-6:checked ~ .z0-tabs-container{
	height: 300px;
	}

	#z0-tab-7:checked ~ .z0-tabs-container{
	height: 400px;
	}

	#z0-tab-8:checked ~ .z0-tabs-container{
	height: 500px;
	}


	/* wysokosc zaladki nieaktywnej */
	#z0-tab-1:checked ~ .z0-icons-container .z0-icons {top: 0px;}
	#z0-tab-2:checked ~ .z0-icons-container .z0-icons {top: 0px;}
	#z0-tab-3:checked ~ .z0-icons-container .z0-icons {top: -58px;}
	#z0-tab-4:checked ~ .z0-icons-container .z0-icons {top: -116px;}
	#z0-tab-5:checked ~ .z0-icons-container .z0-icons {top: -174px;}
	#z0-tab-6:checked ~ .z0-icons-container .z0-icons {top: -232px;}
	#z0-tab-7:checked ~ .z0-icons-container .z0-icons {top: -290px;}
	#z0-tab-8:checked ~ .z0-icons-container .z0-icons {top: -290px;}

	#z0-tab-1:checked ~ .z0-tabs-container .z0-tab-1,
	#z0-tab-2:checked ~ .z0-tabs-container .z0-tab-2,
	#z0-tab-3:checked ~ .z0-tabs-container .z0-tab-3,
	#z0-tab-4:checked ~ .z0-tabs-container .z0-tab-4,
	#z0-tab-5:checked ~ .z0-tabs-container .z0-tab-5,
	#z0-tab-6:checked ~ .z0-tabs-container .z0-tab-6,
	#z0-tab-7:checked ~ .z0-tabs-container .z0-tab-7,
	#z0-tab-8:checked ~ .z0-tabs-container .z0-tab-8
	{

	/Efekt 0. Ukryj/pokaz/
	/display: block;/

	/Efekt 1. Fade/
	opacity:1;
	filter: alpha(opacity=100);
	z-index:100;
	}

	#z0-tab-1:checked ~ .z0-icons-container .z0-icons .z0-tab-1 i,
	#z0-tab-2:checked ~ .z0-icons-container .z0-icons .z0-tab-2 i,
	#z0-tab-3:checked ~ .z0-icons-container .z0-icons .z0-tab-3 i,
	#z0-tab-4:checked ~ .z0-icons-container .z0-icons .z0-tab-4 i,
	#z0-tab-5:checked ~ .z0-icons-container .z0-icons .z0-tab-5 i,
	#z0-tab-6:checked ~ .z0-icons-container .z0-icons .z0-tab-6 i,
	#z0-tab-7:checked ~ .z0-icons-container .z0-icons .z0-tab-7 i,
	#z0-tab-8:checked ~ .z0-icons-container .z0-icons .z0-tab-8 i
	{
	border-color: #000;
	background: #000;
	color: #fff;
	padding: 14px;
	font-size: 26px;
	}


	/bg color mods/

	/*#z0-tab-2:checked ~ .z0-tabs-container .z0-tab-2 {
	background: #eee;
	}*/

	/border-color-mods/

	#z0-tab-1:checked ~ .z0-tabs-container {
	border-color: #0170cf;
	}

	#z0-tab-2:checked ~ .z0-tabs-container {
	border-color: #cd3c2a;
	}

	#z0-tab-3:checked ~ .z0-tabs-container {
	border-color: #07afee;
	}

	#z0-tab-4:checked ~ .z0-tabs-container {
	border-color: #cd3c2a;
	}

	.z0-left {
	right: auto;
	left: -300px;
	width: 300px;
	}
	.z0-left .z0-icons-container {
	right: -70px; left: auto;
	}
	.z0-left:hover {
	left: 0; right: auto;
	}
	.z0-left .z0-tabs-container{
	border-right-style: solid;
	border-radius: 0 5px 5px 0;
	border-left: none;
	box-shadow: -3px 2px 5px rgba(0,0,0,0.7);
	}

	</style>
	</head>
	<body>

	<div class="z0">

	<input name="z0-inputs" id="z0-tab-1" class="z0-inputs" type="radio" checked="checked">
	<input name="z0-inputs" id="z0-tab-2" class="z0-inputs" type="radio">
	<input name="z0-inputs" id="z0-tab-3" class="z0-inputs" type="radio">
	<input name="z0-inputs" id="z0-tab-4" class="z0-inputs" type="radio">
	<input name="z0-inputs" id="z0-tab-5" class="z0-inputs" type="radio">
	<input name="z0-inputs" id="z0-tab-6" class="z0-inputs" type="radio">
	<input name="z0-inputs" id="z0-tab-7" class="z0-inputs" type="radio">
	<input name="z0-inputs" id="z0-tab-8" class="z0-inputs" type="radio">

	<div class="z0-icons-container">
	<ul class="z0-icons">
	<li><label for="z0-tab-1" class="z0-tab-1"><i class="fa fa-facebook"></i></label></li>
	<li><label for="z0-tab-2" class="z0-tab-2"><i class="fa fa-google-plus"></i></label></li>
	<li><label for="z0-tab-3" class="z0-tab-3"><i class="fa fa-twitter"></i></label></li>
	<li><label for="z0-tab-4" class="z0-tab-4"><i class="fa fa-youtube"></i></label></li>
	<li><label for="z0-tab-5" class="z0-tab-5"><i class="fa fa-mars"></i></label></li>
	<li><label for="z0-tab-6" class="z0-tab-6"><i class="fa fa-wordpress"></i></label></li>
	<li><label for="z0-tab-7" class="z0-tab-7"><i class="fa fa-rss"></i></label></li>
	<li><label for="z0-tab-8" class="z0-tab-8"><i class="fa fa-github"></i></label></li>
	</ul>
	</div>

	<div class="z0-tabs-container">
	<div class="z0-tab z0-tab-1">Tab 1 content</div>
	<div class="z0-tab z0-tab-2">Tab 2 content</div>
	<div class="z0-tab z0-tab-3">Tab 3 content</div>
	<div class="z0-tab z0-tab-4">Tab 4 content</div>
	<div class="z0-tab z0-tab-5">Tab 5 content</div>
	<div class="z0-tab z0-tab-6">Tab 6 content</div>
	<div class="z0-tab z0-tab-7">Tab 7 content</div>
	<div class="z0-tab z0-tab-8">Tab 8 content</div>
	</div>

	</div>

	</body>
	</html>