» »

Banner Slider Dengan CSS3

Banner slider dengan css3
Banner slider ini hanya untuk banner yang berukuran 468x60 saja, tapi terserah sih, bisa kalian atur.
Untuk penerapanya sendiri cukup mudah,kamu tinggal copy paste HTML dan CSS dibawah ini.
CSS : Di atas kode ]]></b:skin>

HTML Letakan diantara Kode HTML/Didalam <body> dan </body>
( Tergantung, kamu mau letakan dimana.)
HTML
<div id='slider2'>
<div id='mask'>
<ul><li>
<a href='#' title='#'><img src='urlgambar'/></a></li>
<li>
<a href='#' title='#'><img src='urlgambar'/></a>
</li>
<li><a href='#' title='#'><img src='urlgambar'/></a>
</li>
<li><a href='#' title='#'><img src='urlgambar'/></a>
</li>
</ul>
</div>
<div id='progress'>
</div><div id='overlay'>
</div><div id='pause'></div></div>       
a href='#' (ganti tanda pagar dengan URL link yang dituju)
title='#' (ganti dengan nama link yang dituju)
'urlgambar' (ganti dengan Url site yang dituju)
CSS
#slider2 {
width: 468px;
height: 60px;
margin:0px 0px 0px 0px;
overflow: hidden;
background-color: #F8F8F8;
border: 10px solid #F8F8F8;
-moz-transition: all 170ms ease-in;
-webkit-transition: all 170ms ease-in;
-o-transition: all 170ms ease-in;
position: relative;
border-radius: 10px/20px;
}
#mask {
overflow:hidden;
}
#slider2:hover {
background-color:#fff;
border:10px solid #fff;
}
#slider2:hover #pause {
opacity:1;
}
#slider2:hover #progress {
background-color:rgba(255,255,255,0.0);
}
#slider2:hover ul, #slider:hover #progress, #slider:hover #overlay {
-moz-animation-play-state:paused;
-webkit-animation-play-state:paused;
}
#pause {
width:468px;
height:60px;
position:absolute;
top:0;
opacity:0;
pointer-events:none;
-moz-transition:all 170ms ease-in;
-webkit-transition:all 170ms ease-in;
-o-transition:all 170ms ease-in;
}
#progress {
width:1px;
height:1px;
background-color:#ffd000;
-moz-animation:progress 35s infinite;
-webkit-animation:progress 35s infinite;
position:relative;
top:-1px;
-moz-transition:all 170ms ease-in;
-webkit-transition:all 170ms ease-in;
-o-transition:all 170ms ease-in;
}
#overlay {
width:4680px;
height:60px;
position:absolute;
top:0;
pointer-events:none;
-moz-transition:all 170ms ease-in;
-webkit-transition:all 170ms ease-in;
-o-transition:all 170ms ease-in;
opacity:0.5;
-moz-animation:overlay-fade 35s infinite;
-webkit-animation:overlay-fade 35s infinite;
}
#slider2 ul {
width:2400px;
list-style:none;
padding:0;
margin:0;
-moz-animation:slide-animation 35s infinite;
-webkit-animation:slide-animation 35s infinite;
position:relative;
left:0px;
overflow:hidden;
}
#slider2 li {
display:inline;
width:468px;
height:60px;
margin:0;
padding:0;
float:left;
position:relative;

}
#slider2 li:last-of-type {
background-color:#362c30;
}
#slider2 li a {
display:block;
text-decoration:none;
}
#slider2 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;
}

@-webkit-keyframes slide-animation {
0% {opacity:0;}
2% {opacity:1;}
20% {left:0px; opacity:1;}
22.5% {opacity:0.6;}
25% {left:-468px; opacity:1;}
45% {left:-468px; opacity:1;}
47.5% {opacity:0.6;}
50% {left:-936px; opacity:1;}
70% {left:-936px; opacity:1;}
72.5% {opacity:0.6;}
75% {left:-1404px; opacity:1;}
95% {opacity:1;}
98% {left:-1404px; 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:-468px; opacity:1;}
45% {left:-468px; opacity:1;}
47.5% {opacity:0.6;}
50% {left:-936px; opacity:1;}
70% {left:-936px; opacity:1;}
72.5% {opacity:0.6;}
75% {left:-1404px; opacity:1;}
95% {opacity:1;}
98% {left:-1404px; opacity:0;}
100% {left:0px; opacity:0;}
}
@-webkit-keyframes progress {
0% {width:0px; opacity:0;}
2% {width:0px; opacity:1;}
20% {width:468px; opacity:1;}
22.5% {width:468px; opacity:0;}
22.59% {width:0px;}
25% {width:0px; opacity:1;}
45% {width:468px; opacity:1;}
47.5% {width:468px; opacity:0;}
47.59% {width:0px;}
50% {width:0px; opacity:1;}
70% {width:468px; opacity:1;}
72.5% {width:468px; opacity:0;}
72.59% {width:0px;}
75% {width:0px; opacity:1;}
95% {width:468px; opacity:1;}
98% {width:468px; opacity:0;}
100% {width:0px; opacity:0;}
}
@-moz-keyframes progress {
0% {width:0px; opacity:0;}
2% {width:0px; opacity:1;}
20% {width:468px; opacity:1;}
22.5% {width:468px; opacity:0;}
22.59% {width:0px;}
25% {width:0px; opacity:1;}
45% {width:468px; opacity:1;}
47.5% {width:468px; opacity:0;}
47.59% {width:0px;}
50% {width:0px; opacity:1;}
70% {width:468px; opacity:1;}
72.5% {width:468px; opacity:0;}
72.59% {width:0px;}
75% {width:0px; opacity:1;}
95% {width:468px; opacity:1;}
98% {width:468px; opacity:0;}
100% {width:0px; opacity:0;}
}
@-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;}
}
#slider2 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;
}

Postingan terkait:

— — 15 Comments — ,

15 Tanggapan untuk "Banner Slider Dengan CSS3"

  1. Beben Koben28 March 2013 at 17:46

    nice background template^^
    unyu-unyu :D

    ReplyDelete
  2. Aditia Novit28 March 2013 at 17:59

    Hai sobb... saya mampir kesini dan saya sudah berkomentar blog sobat sekarang gantian KOMEN BALIK Di blog saya yah di http://republik-berita.blogspot.com/

    ReplyDelete
  3. Beben Koben28 March 2013 at 20:14

    gak mau :P

    ReplyDelete
  4. Dandi Saseno28 March 2013 at 20:19

    @beben : okey thanks yo...
    @aditia : oke", ngomong nya biasa aja kale :v

    ReplyDelete
  5. Roland Dio29 March 2013 at 11:20

    Wah bannernya lumayan keren sih css3 lagi, tapi bikin blog jadi berat kaga ?

    ReplyDelete
  6. Dandi Saseno29 March 2013 at 14:24

    @Roland Dio : kayaknya kaga sih, gue aja pake ditemplate ini masih sama aje :v

    ReplyDelete
  7. Unknown30 March 2013 at 18:52

    hahahah xD keren sob! gue suka background Loe (y)

    ReplyDelete
  8. Dandi Saseno30 March 2013 at 22:43

    @Lutfie Zard : Thanks om ^_^

    ReplyDelete
  9. royhan muhammad31 March 2013 at 08:14

    bang ini kok gak bisa ya malah ada di kiri atas pojok bannernya?

    ReplyDelete
  10. Dandi Saseno31 March 2013 at 08:27

    ya emangnya dimana lagi ?
    terserah keinginan naruh htmlnya, kalo di bagian header ya di header , kalo dibagian body langsung ya didepannya body :v

    ReplyDelete
  11. Anonymous4 April 2013 at 20:14

    Makasih atas Infonya ia Mas :)

    ReplyDelete
  12. Admin Z-T Blog13 April 2013 at 20:22

    pngn nyoba, tp kapan" aja dch.. :D
    .
    dh lama nih gk ksni,, apa kabar gan..? :D ,templatenya sedap gan.. :D

    ReplyDelete
    Replies
    1. Dandi Saseno13 April 2013 at 21:04

      kabar ane alhamdulillah baik gan, thanks dah mampir kesini lagi :)

      Delete
  13. XAIFAM14 April 2013 at 04:48

    Template.ny keren sob, warna warni...
    komment back maskedx.blogspot.com

    ReplyDelete
  14. Unknown26 April 2013 at 08:38

    Wah manteb nih brow , ane nyari nyari .
    ternyata disini to .
    thanks share brow .
    comment back melodicdark.blogspot.com

    ReplyDelete

Catatan :
- Dilarang Menggunakan Link Aktif / Live Link
- Dilarang Promosi Iklan
- Dilarang Nyepam
- Untuk Menyisipkan Kode, Gunakan tag <i rel='code'> Taruh Kode Disini </i>
- Untuk Menyisipkan Kode Panjang, Gunakan tag <i rel='pre'> Taruh kode panjang disini </i>
- Untuk Menyisipkan Catatan, Gunakan <b rel='quote> Taruh Catatan disini </b>
- Untuk Menyisipkan Gambar, Gunakan <i rel="'image> URL Gambar </i>
- Untuk Menyisipkan Youtube, Gunakan <i rel='youtube'> URL Youtube </i>

Sebelum menyisipkan kode silahkan gunakan Tools Konversi Kode.
Caranya tinggal klik tombol "Konversi Kode" yang berada di Form Komentar.

Subscribe to: Post Comments (Atom)