Advertisement

Home / CSS / Efeck Gambar / Membuat efek pure css3 slider keren

Tuesday, May 27, 2014

Membuat efek pure css3 slider keren

By Unknown
On
ads

Hayyy,. sobat kali ini saya akan membagikan efek keren pada gambar yaitu Efek Pure Css3 Slider karena slider ini saya buat dari banyak kode CSS3. Setelah saya membaca Disini Walaupun saya cuma mengerti sedikit mengenai Efek Pure Css3 Slider ini.

Efek Pure Css3 Slider ini akan sempurna anda lihat jika browser anda mendukung efek transition jika browser anda tidak mendukung efek transition maka slider ini tidak akan terlihat sempurna, karena perpindahan gambarnya menggunakan efek transition. tapi slider ini tetep bekerja di browser yang tidak support transition cuman efeknya saja yang tidak muncul hehehe. Lebih jelas nya silahkan sobat lihat DEMO nya di bawah ini.

  • Disini deskripsi gambar atau Link Blog Irvan Efendy
  • Disini deskripsi gambar 2
  • Disini deskripsi gambar 3
  • Disini deskripsi gambar 4
  • Slider Efek muter
  • Slider Efek gerak-kanan
  • Slider Efek miring

    • Untuk melihat efeknya silahkan sobat klik tombol Navigasinya, Jika sobat tertarik untuk membuat Efek Pure Css3 Slider ini.

    Simak langkah2 dibawah ini:

    1. Login ke akun blogger sobat
    2. Klik Template » Edit HTML
    3. Kemudian tekan Ctrl+F cari kode ]]></b:skin> atau </style>
    4. Lalu tambahkan kode CSS berikut ini tepat diatas kode ]]></b:skin> atau </style> 
    #slider-vanz {
     padding:0;
     width:550px;
     height:300px;
     margin:0 auto;
     background:#98d url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-hzPCnjNCPOONpc3yL3P3k05AgOo7Ii2KYH3-i8IlXdTJGn2zb7xMeSTvWlR1Q8ZrxLw57GcuzTmwdZNX1YzgRA3XhRsMO5zhpJ8-DUDxmnIlkbws8ZK-astcs912iFbMFJCg93FY8AiM/s1600/BIE_Beckheader.jpg)no-repeat center;
     position:relative;
     border:4px solid #C03E16;
     overflow:hidden;
    }
    #slider-vanz .gambar {
     padding:0;
     margin:0 auto;
    }
    #slider-vanz .gambar input {
     display:none;
    }
    #slider-vanz .gambar li {
     list-style-type:none;
     margin:0;
     padding:0;
    }
    #slider-vanz .gambar 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-vanz input:checked ~ img,
    #slider-vanz input:checked ~ img#gerak-kiri,
    #slider-vanz input:checked ~ img#gerak-bawah,
    #slider-vanz input:checked ~ img#gerak-atas,
    #slider-vanz input:checked ~ img#muter,
    #slider-vanz input:checked ~ img#gerak-kanan,
    #slider-vanz input:checked ~ img#miring {
     -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-vanz .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;
    }
    #slider-vanz label {
     padding:1px 10px;
     background:#BC2315;
     color:#FFF;
     font:bold 12px/20px Arial,sans-serif;
     text-decoration:none;
     margin:1px 4px 1px 0;
     display:inline-block;
     cursor:pointer;
     position:relative;
    }
    #slider-vanz .gambar li .deskripsi {
     position:absolute;
     padding:5px;
     background:rgba(0,0,0,0.8);
     color:#FA381E;
     left:0;
     right:0;
     bottom:-1000px;
     font:normal 13px/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-vanz input:checked ~ .deskripsi {
     -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-vanz .gambar li .deskripsi a,
    #slider-vanz .gambar li .deskripsi a:visited {
     color:#fff;
     text-decoration:none;
    }
    #slider-vanz .gambar img#gerak-kiri,
    #slider-vanz .gambar img#gerak-kanan,
    #slider-vanz .gambar img#gerak-bawah,
    #slider-vanz .gambar img#gerak-atas,
    #slider-vanz .gambar img#muter,
    #slider-vanz .gambar img#miring {
     -moz-transition-delay:0.5s;
     -o-transition-delay:0.5s;
     -webkit-transition-delay:0.5s;
     transition-delay:0.5s;
    }
    #slider-vanz .gambar img#gerak-kiri {
     left:-100%
    }
    #slider-vanz .gambar img#gerak-kanan {
     left:100%
    }
    #slider-vanz .gambar img#gerak-bawah {
     top:100%
    }
    #slider-vanz .gambar img#gerak-atas {
     top:-100%
    }
    #slider-vanz .gambar img#muter {
     -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-vanz .gambar img#miring {
     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);
    }

    5. Masukan kode HTML di bawah ini didalam gadget HTML/Javascript atau bisa juga di taruh dalam postingan blog sobat
    <div id="slider-vanz">
    <div class="gambar">
    <li><input checked="true" id="a" name="system" type="radio" />
    <img id="gerak-kiri" src="URL gambar1.jpg" />
    <div class="deskripsi">Disini deskripsi gambar 1</div>
    </li>
    <li><input id="b" name="system" type="radio" />
    <img id="gerak-kanan" src="URL gambar1.jpg" />
    <div class="deskripsi">Disini deskripsi gambar 2</div>
    </li>
    <li><input id="c" name="system" type="radio" />
    <img id="gerak-atas" src="URL gambar1.jpg" />
    <div class="deskripsi">Disini deskripsi gambar 3</div>
    </li>
    <li><input id="d" name="system" type="radio" />
    <img id="gerak-bawah" src="URL gambar1.jpg" />
    <div class="deskripsi">Disini deskripsi gambar 4</div>
    </li>
    <li><input id="e" name="system" type="radio" />
    <img id="muter" src="URL gambar1.jpg" />
    <div class='deskripsi'>Disini deskripsi gambar 5</div>
    </li>
    <li><input id="f" name="system" type="radio" />
    <img id="miring" src="URL gambar1.jpg" />
    <div class='deskripsi'>Disini deskripsi gambar 6</div>
    </li>
    <li><input id="g" name="system" type="radio" />
    <img src="URL gambar1.jpg" />
    <div class='deskripsi'>Disini deskripsi gambar 7</div>
    </li>
    </div><!--Penutup .gambar-->
    <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>
    </div><!--Penutup .nav-->
    </div><!--Penutup #slider-vanz-->

    Silahkan di coba dan semoga berhasil......
    Happy Blogging and Coding,.. :)

    Membuat efek pure css3 slider keren Rating: 4.5 Diposkan Oleh: Unknown
    ads

    Subscribe to: Post Comments (Atom)

    Advertisement

     

    Top