free font collection for designer

Tutorial Creating 100% Pure CSS Contents Slider

Slider is a good way to display some content in a confined area. There are various ways to create content slider. Content slider can be filled with images and text. Typically, the slider for the latest news, latest posts or featured posts.

In this post, I want show you some tutorials and code to create content slider. But, I do not use javascript, everything is 100% CSS code. Pure CSS, as I have previously made, with pure CSS dropdown menus.

Sometimes interfere with the use of javascript on the client side or weight. Or if the client does not support javascript, this course will create problems for us as developers. The solution is pure CSS, this is challenge me  how to make something with 100% pure CSS.

Ok, prepare your favorite editor, I usually use notepad++ 

1. The HTML Code

<html>
<head>
 <link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
  <img class='photo'  src="http://farm9.staticflickr.com/8320/8035372009_7075c719d9.jpg" alt="" />
  <img class='photo'  src="http://farm9.staticflickr.com/8517/8562729616_35b1384aa1.jpg" alt="" />
  <img class='photo'  src="http://farm9.staticflickr.com/8465/8113424031_72048dd887.jpg" alt="" />
  <img class='photo'  src="http://farm9.staticflickr.com/8241/8562523343_9bb49b7b7b.jpg" alt="" />

</div>
</body>
</html>

Ok, done, then creating CSS file

2. CSS Code

body{background:#202133;}
.container{
  margin:50px auto;
  width:500px;
  height:300px;
  overflow:hidden;
  border:10px solid;
  border-top-color:#856036;
  border-left-color:#5d4426;
  border-bottom-color:#856036;
  border-right-color:#5d4426;
  position:relative;

}
.photo{
  position:absolute;
  animation:round 16s infinite;
  opacity:0;
  
}
@keyframes round{   
  25%{opacity:1;}
  40%{opacity:0;}
} 

img:nth-child(4){animation-delay:0s;}
img:nth-child(3){animation-delay:4s;}
img:nth-child(2){animation-delay:8s;}
img:nth-child(1){animation-delay:12s;}

Ok, simple way to creating pure CSS content slider.

Download this source code here at mega.co.nz

Ok, next another tutorial, same with above but different in  style. Lets check this out

1. HTML Code

<html>
<head>

</head>
<body>
<div id="slider-shadow">
	<div id="slider">
		<div id="mask">
			<ul>
				<li>
					<a href="#" title="View my first image link"><img src="http://iamceege.com/pure-css3-content-slider/images/1.png" /></a>
				</li>
				<li>
					<a href="#" title="View my second image link"><img src="http://iamceege.com/pure-css3-content-slider/images/2.png" /></a>
					<span><h2>Image Caption</h2></span>
				</li>
				<li>
					<iframe src="http://en.wikipedia.org/wiki/Calvin_and_Hobbes" width="600" height="200" frameborder="0" scrolling="no"></iframe>
					<span><h2>Iframe Caption</h2></span>
				</li>
				<li>
					<a href="#" title="View my third image link"><img src="http://iamceege.com/pure-css3-content-slider/images/3.png" /></a>
				</li>
			</ul>
		</div>
		<div id="progress">
		</div>
		<div id="overlay">
		</div>
		<div id="pause">
		</div>
	</div>
</div>
</body>
</html>

 2. CSS Code

body {
	background: #362C30;
}

#slider {
	width:600px;
	height:200px;
	margin:40px auto 0;
	overflow:visible;
	background-color:#362c30;
	border:10px solid #362c30;
	-moz-transition:all 150ms ease-in;
	-webkit-transition:all 150ms ease-in;
	-o-transition:all 150ms ease-in;
	position:relative;
	transform:rotate(0deg);
	-ms-transform:rotate(0deg);
	-moz-transform:rotate(0deg);
	-webkit-transform:rotate(0deg);
	-o-transform:rotate(0deg);
}
#mask {
	overflow:hidden;
}
#slider:hover {
	background-color:#fff;
	border:10px solid #fff;
	-webkit-animation:rotatey 400ms ease-out;
	-moz-animation:rotatey 400ms ease-out;
}
#slider:hover #pause {
	opacity:1;
}
#slider:hover #progress {
	background-color:rgba(255,255,255,0.0);
}
#slider:hover ul, #slider:hover #progress, #slider:hover #overlay {
	-moz-animation-play-state:paused;
	-webkit-animation-play-state:paused;
}
#pause {
	width:600px;
	height:200px;
	position:absolute;
	top:0;
	opacity:0;
	background-image:url(http://iamceege.com/pure-css3-content-slider/images/paused.png);
	background-position:566px 10px;
	background-repeat:no-repeat;
	pointer-events:none;
	-moz-transition:all 150ms ease-in;
	-webkit-transition:all 150ms ease-in;
	-o-transition:all 150ms ease-in;
}
#progress {
	width:1px;
	height:1px;
	background-color:#ffd000;
	-moz-animation:progress 18s infinite;
	-webkit-animation:progress 18s infinite;
	position:relative;
	top:-1px;
	-moz-transition:all 150ms ease-in;
	-webkit-transition:all 150ms ease-in;
	-o-transition:all 150ms ease-in;
}
#overlay {
	width:600px;
	height:200px;
	position:absolute;
	top:0;
	background-image:url(http://iamceege.com/pure-css3-content-slider/images/overlay.png);
	background-position:center;
	background-repeat:no-repeat;
	pointer-events:none;
	-moz-transition:all 150ms ease-in;
	-webkit-transition:all 150ms ease-in;
	-o-transition:all 150ms ease-in;
	opacity:0.5;
	-moz-animation:overlay-fade 18s infinite;
	-webkit-animation:overlay-fade 18s infinite;
}
#slider ul {
	width:2400px;
	list-style:none;
	padding:0;
	margin:0;
	-moz-animation:slide-animation 18s infinite;
	-webkit-animation:slide-animation 18s infinite;
	position:relative;
	left:0px;
}
#slider li {
	display:inline;
	width:600px;
	height:200px;
	margin:0;
	padding:0;
	float:left;
	position:relative;
	background-image:url(http://iamceege.com/pure-css3-content-slider/images/loader.gif);
	background-position:50% 50%;
	background-repeat:no-repeat;
}
#slider li:last-of-type {
	background-color:#362c30;
}
#slider li a {
	display:block;
	text-decoration:none;
}
#slider li span {
	display:block;
	width:560px;
	padding:15px 20px;
	position:absolute; 
	bottom:0; 
	left:0;
	background-color:rgba(54,44,48,0.6);
	border-top:1px solid #362c30;
	text-shadow:1px 1px 1px #362c30;
	pointer-events:none;
	text-align:left;
}
#slider-shadow {
	width:100%;
	height:260px;
	background-image:url(http://iamceege.com/pure-css3-content-slider/images/slider-shadow.png);
	background-position:center bottom;
	background-repeat:no-repeat;
	margin:10px auto 0;
}
@-webkit-keyframes slide-animation {
0% {opacity:0;}
2% {opacity:1;}
20% {left:0px; opacity:1;}
22.5% {opacity:0.6;}
25% {left:-600px; opacity:1;}
45% {left:-600px; opacity:1;}
47.5% {opacity:0.6;}
50% {left:-1200px; opacity:1;}
70% {left:-1200px; opacity:1;}
72.5% {opacity:0.6;}
75% {left:-1800px; opacity:1;}
95% {opacity:1;}
98% {left:-1800px; opacity:0;}
100% {left:0px; opacity:0;}
}
@-moz-keyframes slide-animation {
0% {opacity:0;}
2% {opacity:1;}
20% {left:0px; opacity:1;}
22.5% {opacity:0.6;}
25% {left:-600px; opacity:1;}
45% {left:-600px; opacity:1;}
47.5% {opacity:0.6;}
50% {left:-1200px; opacity:1;}
70% {left:-1200px; opacity:1;}
72.5% {opacity:0.6;}
75% {left:-1800px; opacity:1;}
95% {opacity:1;}
98% {left:-1800px; opacity:0;}
100% {left:0px; opacity:0;}
}
@-webkit-keyframes progress {
0% {width:0px; opacity:0;}
2% {width:0px; opacity:1;}
20% {width:600px; opacity:1;}
22.5% {width:600px; opacity:0;}
22.59% {width:0px;}
25% {width:0px; opacity:1;}
45% {width:600px; opacity:1;}
47.5% {width:600px; opacity:0;}
47.59% {width:0px;}
50% {width:0px; opacity:1;}
70% {width:600px; opacity:1;}
72.5% {width:600px; opacity:0;}
72.59% {width:0px;}
75% {width:0px; opacity:1;}
95% {width:600px; opacity:1;}
98% {width:600px; opacity:0;}
100% {width:0px; opacity:0;}
}
@-moz-keyframes progress {
0% {width:0px; opacity:0;}
2% {width:0px; opacity:1;}
20% {width:600px; opacity:1;}
22.5% {width:600px; opacity:0;}
22.59% {width:0px;}
25% {width:0px; opacity:1;}
45% {width:600px; opacity:1;}
47.5% {width:600px; opacity:0;}
47.59% {width:0px;}
50% {width:0px; opacity:1;}
70% {width:600px; opacity:1;}
72.5% {width:600px; opacity:0;}
72.59% {width:0px;}
75% {width:0px; opacity:1;}
95% {width:600px; opacity:1;}
98% {width:600px; opacity:0;}
100% {width:0px; opacity:0;}
}
@-webkit-keyframes rotatey {
0% {transform:rotate(0deg); -ms-transform:rotate(0deg); -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg);}
25% {transform:rotate(1deg); -ms-transform:rotate(1deg); -moz-transform:rotate(1deg); -webkit-transform:rotate(1deg); -o-transform:rotate(1deg);}
50% {transform:rotate(-1deg); -ms-transform:rotate(-1deg); -moz-transform:rotate(-1deg); -webkit-transform:rotate(-1deg); -o-transform:rotate(-1deg);}
100% {transform:rotate(0deg); -ms-transform:rotate(0deg); -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg);}
}
@-moz-keyframes rotatey {
0% {transform:rotate(0deg); -ms-transform:rotate(0deg); -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg);}
25% {transform:rotate(1deg); -ms-transform:rotate(1deg); -moz-transform:rotate(1deg); -webkit-transform:rotate(1deg); -o-transform:rotate(1deg);}
50% {transform:rotate(-1deg); -ms-transform:rotate(-1deg); -moz-transform:rotate(-1deg); -webkit-transform:rotate(-1deg); -o-transform:rotate(-1deg);}
100% {transform:rotate(0deg); -ms-transform:rotate(0deg); -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg);}
}
@-webkit-keyframes overlay-fade {
0% {opacity:0;}
2% {opacity:0.5;}
95% {opacity:0.5;}
98% {opacity:0;}
100% {opacity:0;}
}
@-moz-keyframes overlay-fade {
0% {opacity:0;}
2% {opacity:0.5;}
95% {opacity:0.5;}
98% {opacity:0;}
100% {opacity:0;}
}
#slider ul li span h2 {
	font-size:24px;
	line-height:24px;
	color:#fff;
	font-weight:normal;
	font-family:'Communist-Regular';
	text-shadow:1px 1px 1px #362c30;
}

Download this source code

I’ll see you in the next tutorial, thanks

 

One comment

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.