loker

Browse Manual » Wiring » cara » css » door » effect » membuat » sliding » with » Cara Membuat Effect Sliding Door With CSS

---

Cara Membuat Effect Sliding Door With CSS

Kali ini saya akan memberikan tutorial Cara Membuat Effect Sliding Door With CSS. Saya tidak tahu harus memberi nama apa efek ini, karena efek ini seperti sebuah pintu geser  yang dibuka maka saya namakan efek ini ”sliding door”. :D

Saya hanya menggunakan CSS yang cukup sederhana, class coveraka, dan class left dan right untuk content.

HTML::

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

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

</div>

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

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

</div>

CSS::

.coveraka {
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);
}
.coveraka 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;
}
.coveraka: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;
}
.coveraka:hover .right_gate {
left: 100%; right: -50%;
}
.slide_in {
overflow:hidden;
}
.slide_in .left_gate {
background: #0C5CA3;
}
.slide_in .right_gate {
background: #41B5F0;
}

DAN HASILNYA ::