Input + Label be Awesome Work

Seperti pada episode sebelumnya snippet code input type, sekarang waktu update artikel tersebut. Jika sobat membaca sampai akhir, maka kalian akan menemukan link source dengan judul clean animated input labels by Oliver Knoblich! Sederhana namun tetap gaya, AA Koben akan berbagi hal serupa (input property) ketika mulai mengetikan kata-kata pada kotak, akan muncul kalimat yg tersembunyi. Demikian penjelasan yg membingungkan :D Original source with title float labels with CSS cdpn.io/nimFr
Source tersebut merupakan quick sketch yang mana untuk menunjukan sebuah ide saja kata si Alexandr Marinenko :P Perlu di ingat juga nih, penulisan kode yg digunakan tidak umum dan gue pikir ini code snippets kelas master. Berikut info beberapa kode snippet yg bisa kalian ketahui www.realcombiz.com/2014/02/20-useful-html5-code-snippets-you.html

Coba sekarang ketikan kata/kalimat pada kotak

First name

Second name

.wrappet {
display: inline-block;
overflow: hidden;
padding: 15px 0 0;
position: relative;
vertical-align: top;
}
.wrappet input[type=text] {
border: 1px solid #888;
padding: 10px;
width: 212px;
}
.wrappet label {
color: #2980b9;
font-size: 11px;
font-weight: bold;
left: 4px;
opacity: 0;
position: absolute;
top: 0;
}
.wrappet input[type=text]:valid + label {
opacity: 1;
}
.container {
margin: 0 0 10px;
}
.container.popup .wrappet label {
transition: opacity 0.25s ease-out, top 0.25s ease-out;
-webkit-transition: opacity 0.25s ease-out, top 0.25s ease-out;
top: 10px;
}
.container.popup .wrappet input[type=text]:valid + label {
top: 0;
}
.container.slide .wrappet label {
transition: opacity 0.25s ease-out, left 0.25s ease-out;
-webkit-transition: opacity 0.25s ease-out, left 0.25s ease-out;
left: -20%;
}
.container.slide .wrappet input[type=text]:valid + label {
left: 4px;
}

Planning HTML<div class="container popup">
<div class="wrappet">
<input type="text" placeholder="Name" required />
<label>First name</label>
</div>
</div>

<div class="container slide">
<div class="wrappet">
<input type="text" placeholder="Name" required />
<label>First name</label>
</div>
</div>Ingat kode di atas merupakan framework (ide). Sobat bisa pakai sesuai kebutuhan dan sesuai kemampuan ;)) Variabel input type text akan terlihat lebih full stylish jika pakai trik tersebut :-" Kode snippet input property ini sampai membuat seorang owner codepen.io Chris Coyier berkreasi juga dengan title label pattern with just CSS cdpn.io/CiflJ

samples.msdn.microsoft.com/iedevcenter/FormControls/scenario4.html

Happy input \m/