simple css3 slider

moonroemoort

css

19 January 2014

Belum ada komentar

 yosh kali ini moonroemoort akan share simple css3 slider untuk demonya bisa di lihat disini

• masuk dashboard
• klik edit html
• cari kode ]]></b:skin>
• paste kan kode di bawah ini tepat di atas kode ]]></b:skin>

#slider {

 padding: 0;

 width:100%;

 height:400px;

 margin:0 auto;

 background:#000;

 position:relative;

 border:3px solid #000;

 overflow:hidden;

}

#slider .gallery {

 padding:0;

 margin:0 auto;

}

#slider .gallery input {

 display:none;

}

#slider .gallery li {

 list-style-type:none;

 margin:0;

 padding:0;

}

#slider .gallery img {

 width:100%;

 height:100%;

 position:absolute;

 -moz-transition:all 900ms linear;

 -o-transition:all 900ms linear;

 -webkit-transition:all 900ms linear;

 transition:all 900ms linear;

 opacity:0;

 visibility:hidden;

}

#slider input:checked ~ img,

#slider input:checked ~ img#motion-left,

#slider input:checked ~ img#move-down,

#slider input:checked ~ img#move-over,

#slider input:checked ~ img#run-around,

#slider input:checked ~ img#move-right,

#slider input:checked ~ img#italic {

 -moz-transform:rotate(0deg) scale(1);

 -ms-transform:rotate(0deg) scale(1);

 -o-transform:rotate(0deg) scale(1);

 -webkit-transform:rotate(0deg) scale(1);

 transform:rotate(0deg) scale(1);

 -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";

 filter:alpha(opacity=100);

 opacity:1;

 top:0 !important;

 left:0;

 right:0;

 visibility:visible;

}

#slider .nav {

 padding:2px;

 background:rgba(0,0,0,0.5);

 color:#09f;

 text-decoration:none;

 margin:0;

 position:absolute;

 top:0;

 left:0;

 right:0;

 text-align:center;

}

#slider label {

 padding:1px 10px;

 background:rgba(252, 252, 252, 0.31);

 color:#FFF;

 font:bold 12px/20px Arial,sans-serif;

 text-decoration:none;

 margin:1px 4px 1px 0;

 display:inline-block;

 cursor:pointer;

 position:relative;

 -webkit-transition: .3s;

 -moz-transition: .3s;

 -ms-transition: .3s;

 -o-transition: .3s;

 transition: .3s;

}

#slider label:hover {

 background: #000;

}

#slider .gallery li .description {

 position:absolute;

 padding:5px;

 background:rgba(10, 10, 10, 0.59);

 color:#fff;

 left:0;

 right:0;

 bottom:-1000px;

 font:bold 14px/20px Arial,sans-serif;

 -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";

 filter:alpha(opacity=0);

 opacity:0;

 -moz-transition:all 1s ease-in-out;

 -o-transition:all 1s ease-in-out;

 -webkit-transition:all 1s ease-in-out;

 transition:all 1s ease-in-out;

}

#slider input:checked ~ .description {

 -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";

 filter:alpha(opacity=100);

 opacity:1;

 bottom:0;

 -moz-transition-delay:0.5s;

 -o-transition-delay:0.5s;

 -webkit-transition-delay:0.5s;

 transition-delay:0.5s;

}

#slider .gallery li .description a,

#slider .gallery li .description a:visited {

 color:#ff0;

 text-decoration:none;

}

#slider .gallery img#motion-left,

#slider .gallery img#move-right,

#slider .gallery img#move-down,

#slider .gallery img#move-over,

#slider .gallery img#run-around,

#slider .gallery img#italic {

 -moz-transition-delay:0.5s;

 -o-transition-delay:0.5s;

 -webkit-transition-delay:0.5s;

 transition-delay:0.5s;

}

#slider .gallery img#motion-left {

 left:-100%;

}

#slider .gallery img#move-right {

 left:100%;

}

#slider .gallery img#move-down {

 top:100%

}

#slider .gallery img#move-over {

 top:-100%

}

#slider .gallery img#run-around {

 -moz-transform:rotate(1230deg) scale(0);

 -ms-transform:rotate(1230deg) scale(0);

 -o-transform:rotate(1230deg) scale(0);

 -webkit-transform:rotate(1230deg) scale(0);

 transform:rotate(1230deg) scale(0);

}

#slider .gallery img#italic {

 opacity:0;

 -moz-transform:matrix(2.373,0,0.085,-0.013,-50.175,12.399);

 -ms-transform:matrix(2.373,0,0.085,-0.013,-50.175,12.399);

 -o-transform:matrix(2.373,0,0.085,-0.013,-50.175,12.399);

 -webkit-transform:matrix(2.373,0,0.085,-0.013,-50.175,12.399);

 transform:matrix(2.373,0,0.085,-0.013,-50.175,12.399);

}

•  lalu klik tata letak > tambah gadget
• tambahkan kode dibawah ini

<div id="slider">

<div class="gallery">

<li><input checked="true" id="a" name="system" type="radio" />

<img id="motion-left" src="IMAGE URL" />

<div class="description">DESCRIPTION TEXT</div>

</li>

<li><input id="b" name="system" type="radio" />

<img id="move-right" src="IMAGE URL" />

<div class="description">DESCRIPTION TEXT</div>

</li>

<li><input id="c" name="system" type="radio" />

<img id="move-over" src="IMAGE URL" />

<div class="description">DESCRIPTION TEXT</div>

</li>

<li><input id="d" name="system" type="radio" />

<img id="move-down" src="IMAGE URL" />

<div class="description">DESCRIPTION TEXT</div>

</li>

<li><input id="e" name="system" type="radio" />

<img id="run-around" src="IMAGE URL" />

<div class='description'>DESCRIPTION TEXT</div>

</li>

<li><input id="f" name="system" type="radio" />

<img id="italic" src="IMAGE URL" />

<div class='description'>DESCRIPTION TEXT</div>

</li>

<li><input id="g" name="system" type="radio" />

<img id="run-around" src="IMAGE URL" />

<div class='description'>DESCRIPTION TEXT</div>

</li>

<li><input id="h" name="system" type="radio" />

<img id="move-right" src="IMAGE URL" />

<div class="description">DESCRIPTION TEXT</div>

</li>

<li><input id="i" name="system" type="radio" />

<img id="move-over" src="IMAGE URL" />

<div class="description">DESCRIPTION TEXT</div>

</li>

<li><input id="j" name="system" type="radio" />

<img src="IMAGE URL" />

<div class='description'>DESCRIPTION TEXT</div>

</li>

</div><!--End up .gallery-->

<div class='nav'>

<label for='a'>1</label>

<label for='b'>2</label>

<label for='c'>3</label>

<label for='d'>4</label>

<label for='e'>5</label>

<label for='f'>6</label>

<label for='g'>7</label>

<label for='h'>8</label>

<label for='i'>9</label>

<label for='j'>10</label>

</div><!--End up .nav-->

</div><!--End up #slider-->

• klik simpan

 KETERANGAN

• ganti image url dengan link gambar agan
• ganti description teks dengan deskripsi gambar