Cara Membuat Effect Sliding Door With CSS3 Dengan Mudah

Hallo sahabat Mafia Hacker , Kali ini aku akan membahas tentang Cara Membuat Effect Sliding Door With CS3. Tapi sebelum mulai tau kan apa arti Sliding Door ? Pasti tau kan dan contohnya kayak gimana ? contoh kayak kita sedang membuka gorden dan menutup gorden kembali ! Nah tau kan sekarang?

Tapi menurut kalian pasti keren kalo gambar atau semacamnya dengan effect seperti itu?

Nah gimana caranya ?

Ini Dia 

1. Pertama Login Blogger

2. Lalu pilih Rancangan,pilih EDIT HTML, Lalu Cari kode  ]]></b:skin>

3. Lalu taruh kode CSS ini diatasnya ..

.covermbs {
position: relative;
width: 200px;
height: 200px;
margin: 20px auto;
background-color: #eee;
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);
}
.covermbs p {color:black;
text-align:center;
margin: 0;
}
.left_gate {
position: absolute;
background: #41B5F0;
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;
}
.covermbs:hover .left_gate {
right: 100%; left: -50%;
}
.right_gate {
position:absolute;
background:#0C5CA3;
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;
}
.covermbs:hover .right_gate {
left: 100%; right: -50%;
}
.slide_in {
overflow:hidden;
}
.slide_in .left_gate {
background: #0C5CA3;
}
.slide_in .right_gate {
background: #41B5F0;
}

4. Ganti kode yang berwarna Merah dengan Ukuran anda inginkan .

5. Lalu pasang Kode ini di HTML anda , Pilih Add a gadget dan taruh kode HTML dibawah ini kedalamnya.

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

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

</div>

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

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

</div>

Hasilnya Mohon KLIK -DEMO-

Semoga Bermanfaat :)

Ditulis Oleh : Yandi Mulyadi ~ Semua Artikel Menarik Ada Disini

Sobat sedang membaca artikel tentang Cara Membuat Effect Sliding Door With CSS3 Dengan Mudah. Yang diketik tangan Oleh Admin Yandi Mulyadi, Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya ya? <a href="http://mafiazblogger.blogspot.com/2012/09/cara-membuat-effect-sliding-door-with.html" target="_blank">Cara Membuat Effect Sliding Door With CSS3 Dengan Mudah</a>

Artikel tersebut bisa Anda akses via mobile, klik disini.

Share this post :

Related Posts :