Cara Membuat Banner Slidder Elegant Dengan CSS

Assalam'ualaikum, Kali Ini Dark Kage Akan Memberikan Trick Yang Bagus Oke Langsung Saja....
Ini Demonya

• 
• 
• 
• 
  
  

Gimana??? Kerenkan, Hihiihi Ini Kode

CSS

#slider2 {transform: skew(26deg, 0deg) ;
-webkit-transform: skew(26deg, 0deg) ;
-moz-transform: skew(26deg, 0deg) ;
-o-transform: skew(26deg, 0deg) ;
-ms-transform: skew(26deg, 0deg) ;
width: 468px;
height: 60px;
margin:0px 0px 0px 0px;
overflow: hidden;
background-color: #F8F8F8;
border: 10px solid #7a0a0a;
-moz-transition: all 170ms ease-in;
-webkit-transition: all 170ms ease-in;
-o-transition: all 170ms ease-in;
position: relative;
border-radius: 5px;
}
#mask {
overflow:hidden;
}
#slider2:hover {
border:dashed 5px #000;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
background-color:#fff;
border:5px 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 #7a0a0a;
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:'Shojumaru';
text-shadow:1px 1px 1px #7a0a0a;
}

HTML

<div id='slider2'>
<div id='mask'>
<ul><li>
  <a href='http://darkkage10.blogspot.com' title='Dark Kage | Blogger Newbie'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsVKv7FDTvXmoR5gHmSbdJgsPykvvsmFDXdzZ1rSzThUFfGxJ-dk5l2wRGMrQAhq1Co1pAwdeZNPbJtEON0VfE9HkavQh86ioKyvFlPOP1bB65C2pjLssv7CXVwgW3B8dnc8n6A2i5CHkl/s1600/468-With-Spin.gif'/></a></li>
<li>
<a href='http://darkkage10.blogspot.com' title='Dark Kage | Blogger Newbie'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsVKv7FDTvXmoR5gHmSbdJgsPykvvsmFDXdzZ1rSzThUFfGxJ-dk5l2wRGMrQAhq1Co1pAwdeZNPbJtEON0VfE9HkavQh86ioKyvFlPOP1bB65C2pjLssv7CXVwgW3B8dnc8n6A2i5CHkl/s1600/468-With-Spin.gif'/></a>
</li>
<li><a href='http://darkkage10.blogspot.com' title='Dark Kage | Blogger Newbie'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsVKv7FDTvXmoR5gHmSbdJgsPykvvsmFDXdzZ1rSzThUFfGxJ-dk5l2wRGMrQAhq1Co1pAwdeZNPbJtEON0VfE9HkavQh86ioKyvFlPOP1bB65C2pjLssv7CXVwgW3B8dnc8n6A2i5CHkl/s1600/468-With-Spin.gif'/></a>
</li>
<li><a href='http://darkkage10.blogspot.com' title='Dark Kage | Blogger Newbie'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsVKv7FDTvXmoR5gHmSbdJgsPykvvsmFDXdzZ1rSzThUFfGxJ-dk5l2wRGMrQAhq1Co1pAwdeZNPbJtEON0VfE9HkavQh86ioKyvFlPOP1bB65C2pjLssv7CXVwgW3B8dnc8n6A2i5CHkl/s1600/468-With-Spin.gif'/></a>
</li>
</ul>
</div>
<div id='progress'>
</div><div id='overlay'>
</div><div id='pause'>
</div></div>

Oke Semoga Bermanfaat :D 

• Twitter
• Facebook
• Google
• Tumblr
• Pinterest