Pure CSS3 Content Slider

Hallo :D
Setelah Beberapa Hari Penyolongan kagak Nge Post kali Ini Mulai Ngepost lagi :D.
Siang ini ane share cara membuat Pure Css3 Content Slider.
Ane Visit CssDeck eh nemu nih slide Cakep XD..
noh caranye!!

1. Masuk Ke Blog, Rancangan, Edit HTML.
2.Cari Kode ]]></b:skin> letakan kode berikut di atas ]]></b:skin>

DEMO

#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;
}

3. Letakkan kode berikut ditempat yang anda ingin kan

<div id='slider-shadow'>
<div id='slider'>
<div id='mask'>
<ul>
<li>
<a href='http://www.penyolongan-cheater.blogspot.com' title='We Are Penyolongan'><img src='http://i1144.photobucket.com/albums/o496/Muhammad_Rendy/slide1penyolongan.png'/></a>
</li>
<li>
<a href='http://www.penyolongan-cheater.blogspot.com' title='Visit And Follow Penyolongan'><img src='http://i1144.photobucket.com/albums/o496/Muhammad_Rendy/slide2penyolongan.png'/></a>
</li>
<li>
<a href='http://www.facebook.com/ariq.nsx' title='New Style'><img src='http://iamceege.com/pure-css3-content-slider/images/3.png'/></a>
</li>
<li>
<a href='https://www.facebook.com/groups/penyolongan.cheater/' title='The Best information Site'><img src='http://i1144.photobucket.com/albums/o496/Muhammad_Rendy/slide3penyolongan.png'/></a>
</li>
</ul>
</div>
<div id='progress'></div>
<div id='overlay'></div>
<div id='pause'></div>
</div></div>

Backlinks

URL

Code For Forum

HTML Code <a href='https://orochimaru-id.blogspot.com/2012/07/pure-css3-content-slider.html' target='_blank'>Pure CSS3 Content Slider</a>

Anda Sekarang Sedang Baca Artikel Tentang Pure CSS3 Content Slider , Boleh Menyebar Luaskan Artikel Ini Atau Mengcopy Paste Artikel Pure CSS3 Content Slider ini Jika Memang Berrmanfaat. Tapi Saya Harap Anda Jangan Lupa Menyertakan Link Pure CSS3 Content Slider Sumbernya. Thank's

Rule For Leave A Comment

Hargai artikel ini dengan meninggalkan jejak berupa saran/komentar. Jejak anda akan membuat Author lebih bersemangat lagi untuk membuat artikel menarik lainnya, tapi sebelum kalian meninggalkan jejak kalian harus ikuti peraturannya :

1. Dilarang SPAM.

2. Berkomentarlah sesuai TOPIK.

3. Komentar yang keluar dari TOPIK akan Author DELETE.

4. Dilarang berkomentar yang berbau unsur SARA,PO*NO dan MENGHINA.