Dalam tutorial ini kita akan mencoba Membuat Effect Sliding Door With CSS, atau juga di sebut membuat efek membelah gambar. Apa Effect Sliding Door With CSS? Ini simillar untuk efek pintu geser di mana pintu slide ke sisi kiri atau kanan dan memperlihatkan teks/code/gambar di baliknya, tapi satu hal yang membuat ini berbeda adalah bahwa efek terlihat seperti gambar splitted menjadi setengah dan satu pergi meninggalkan dan yang lainnya berjalan benar. Satu hal yang sangat penting adalah bahwa jika Anda memasang gambar maka Anda tidak akan menampilkan dua gambar, melainkan hanya akan ada satu. Gambar ini bekerja hanya menggunakan CSS dan HTML jadi sama sekali tidak akan berpengaruh pada kecepatan loading blog/situs Anda, dan untuk cara membuatnya pun sangatlah mudah. Berikut ini akan saya berika kode yang telah saya buat untuk Membuat Effect Sliding Door With CSS.


Membuat Effect Sliding Door With CSS

CSS


    .OWcoveraka {
    position: relative;
    width: 200px; /* lebar */
    height: 200px; /* tinggi */
    margin: 20px auto;
    background-color: #eee;/* warna background dalam */
    z-index: 1;
    
    -webkit-box-shadow: 0 2px 10px rgba(0,0,0,0.3);
    -mox-box-shadow: 0 2px 10px rgba(0,0,0,0.3);
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
    }
    .OWcoveraka p {color:black;
    text-align:center;
    margin: 0;
    }
    .left_gate {
    position: absolute;
    background: #3e81c4;/* warna pintu B */
    bottom: 0; right: 50%; left: 0; top: 0;
    
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    -ms-transition: all 0.5s ease-out;
    -o-transition:all 0.5s ease-out;
    transition: all 0.5s ease-out;
    }
    .OWcoveraka:hover .left_gate {
    right: 100%; left: -50%;
    }
    .right_gate {
    position:absolute;
    background:#222;/* warna pintu A */
    bottom: 0;
    left: 50%;
    right:0;top:0;
    
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    -ms-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
    }
    .OWcoveraka:hover .right_gate {
    left: 100%; right: -50%;
    }
    .slide_in {
    overflow:hidden;
    }
    .slide_in .left_gate {
    background: #fff;/* warna pintu A */
    }
    .slide_in .right_gate {
    background: #3e81c4;/* warna pintu B */
    }

HTML

    <div class="OWcoveraka">
      <div class="left_gate"></div>
      <div class="right_gate"></div>

      <p>Isi Content ato Teks Anda Disini</p>

    </div>

    <div class="OWcoveraka slide_in">
      <div class="left_gate"></div>
      <div class="right_gate"></div>

      <p>Isi Content ato Teks Anda Disini</p>

    </div>


Lalu Hasilnya akan seperti ini


Effect Sliding Doors With CSS!
http://otowebsite.blogspot.com






Sekian, dan semoga bermanfaat!

Poskan Komentar Blogger Disqus

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA...</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Penting:
Jika Anda mengajukan pertanyaan klik 'Subscribe by email' link di bawah form komentar untuk mengetahui komentar balasan.

Khusus untuk membalas komentar disarankan menggunakan tombol balas/reply di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur.

Dilarang Meninggalkan Link Aktif, Link Aktif Terpaksa Akan Saya Hapus Dari Komentar.

NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!".

Konversi Kode di Sini! Daftar Member Aktif

 
Top