HTML Form with Pop Up Labels Effect

Melongok ke web dynamic drive CSS library ada yang unyu-unyu. Telah update beberapa trik di sana, yang mana di dominasi dengan kode CSS3. Dengan semakin maju browser engine gaya penulisan terhadap kode CSS juga tidak bisa dielakan mengalami perubahan yg cukup signifikan. Tentu hal ini berimbas pada kita sebagai user untuk lebih giat belajar agar tidak OON :))
Saya akan sosor, sharing kepada kalian artikel dengan judul pop up form labels! Kotak feedback dengan gaya label akan keluar popup ketika mengklik di area kotak. Begitu kira-kira ;))

.form div.dynamiclabel {
display: block;
margin: 40px 0;
font: 16px;
position: relative;
}
.form div.dynamiclabel input[type="text"], form div.dynamiclabel textarea {
width: 100%;
padding: 10px;
border: 1px solid #c3c3c3;
border-radius: 5px;
}
.form div.dynamiclabel textarea {
height: 200px;
}
.form div.dynamiclabel label {
left: 0;
top: 10px;
color: white;
background: #aaa;
position: absolute;
padding: 3px 10px;
border-radius: 2px;
font-weight: bold;
border: 1px solid black;
opacity: 0;
z-index: -1;
box-shadow: 4px 1px 5px black;
-webkit-backface-visibility: hidden;
-moz-transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
-webkit-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.form div.dynamiclabel > *:focus {
border: 1px solid #000;
box-shadow: 0 0 8px 2px #000;
}
.form div.dynamiclabel > *:focus + label {
opacity: 1;
z-index:100;
top: -35px;
-ms-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-webkit-transform: rotate(-3deg);
transform: rotate(-3deg);
}

<form class="form">
<div class="dynamiclabel">
<input id="name" placeholder="Name..." type="text">
<label for="name">Name</label>
</div>
<div class="dynamiclabel">
<input id="email" placeholder="Email Address" type="text">
<label for="email">Email Address</label>
</div>
<div class="dynamiclabel">
<textarea id="feedback" placeholder="Feedback!!!"></textarea>
<label for="feedback">Add your feedback</label>
</div>
</form>

Demo (set focus on each form field):

Source and selected resource + Bonus...

www.dynamicdrive.com/style/csslibrary/item/pop_up_form_labels
www.dynamicdrive.com/style/csslibrary/item/3d_flip_menu
www.dynamicdrive.com/style/csslibrary/item/responsive_iconic_menu
www.dynamicdrive.com/style/csslibrary/item/grayscale_image_gallery
www.dynamicdrive.com/style/csslibrary/item/flat_flipping_menu_buttons
www.dynamicdrive.com/style/csslibrary/item/css3_oval_switch_checkboxes
thedesignpixel.com/best-free-responsive-blogger-templates.html
basicuse.net/articles/pl/textile/html_css/how_to_create_animated_drop_down_menu_using_only_css3
codepen.io/rlacorne/pen/wnLJH

Bye :-h