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 ::
Effect Sliding Doors With CSS!
Selesai ! dan Semoga bermanfaat.
Posting Komentar