Slider Content use 100% CSS3

Informasi terhangat mengenai feature dari dunia CSS3. Sebelumnya para developer sudah berhasil membuat hack lightbox effect pure use CSS. Dengan hanya menggunakan CSS trick lightbox dapat terealisasikan. Sekarang giliran slider, tentunya juga cuma memakai attribute CSS b-) Bagaimana ini bisa terjadi???
Lagi-lagi variabel CSS3 keyframes berperan melakukan ini semua ;)) Dengan semakin berkembangnya jurus² baru Cascading Style Sheets3 kita para blogger diberikan jalan alternatif dalam menampilkan sesuatu hal yang berbau efek animasi :D Karena kredibilitasnya yg belum bisa diterima di semua jenis browsingan, maka kode-kode yang ditulis berjibun lumayan banyak sob ;;) :D

Firefox selalu memakai atribut @-moz-keyframes, Safari and Chrome pakai @-webkit-keyframes Opera masih menunggu :P

Demo Slider Content use CSS3

Bagaimana sobat-sobat...kerrreeennn kan :x Live demo from original article and file download!

Beben Koben si bloglang anu ganteng kalem tea sudah mempraktekannya, dengan menambahkan size-image supaya image yg ukurannya kecil bisa sama dengan tampilan slider ;)

Coded CSS3

#slider {
width: 600px;
height: 200px;
margin: 10px auto 5px;
overflow: visible;
background-color: #333;
border: 10px solid #333;
-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: #F00;
}
#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://IMAGES/PAUSED/32x32px.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:#0F0;
-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://IMAGES/OVERLAY/600x200px.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://IMAGES/LOADER/32x32px.gif);
background-position: 50% 50%;
background-repeat: no-repeat;
}
#slider img {
width: 600px;
height: 200px;
margin: 0;
padding: 0;
float: left;
}
#slider li a {
display:block;
text-decoration:none;
}
#slider li span {
display: block;
width: 580px;
padding: 5px 10px;
position: absolute;
bottom: 0;
left: 0;
background-color: rgba(54,44,48,0.6);
border-top: 1px solid #111;
pointer-events: none;
text-align: left;
}
#slider ul li span h2 {
font-size: 20px;
line-height: 10px;
color: #fff;
font-weight: bold;
text-shadow: 1px 3px 1px #333;
}
@-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;}
}
@-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);}
}

Coded HTML

<div id="slider">
<div id="mask">

<ul>

<li>
<a href="#" title=""><img src="http://LINK-IMAGE-600X200px.jpg" /></a>
</li>

<li>
<a href="#" title=""><img src="http://LINK-IMAGE-600X200px.jpg" /></a>
<span><h2>Your Image Caption Here</h2></span>
</li>

<li>
<iframe src="http://LINK-WEB-HERE" width="600" height="200" frameborder="0" scrolling="no"></iframe>
<span><h2>Your Caption Here</h2></span>
</li>

<li>
<a href="#" title=""><img src="http://LINK-IMAGE-600X200px.jpg" /></a>
</li>

</ul>
</div>

<div id="progress"></div>
<div id="overlay"></div>
<div id="pause"></div>
</div>

Jika ada kode rusak bentrok sama emotikon, lihat via Ctrl + U saja sob, abis mau upload gagal terus, ziddunya gi error keknya. Nanti kalau sudah bisa saya pasang link download bumbunya :) (kalau ingat) :P
http://ginva.com/2011/12/css-content-slider/
http://www.alessioatzeni.com/CSS3-Cycle-Image-Slider/
Good luck \m/