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):

Name

Email Address

Add your feedback

Source and selected resource + Bonus...

Pop up form labels
• www.dynamicdrive.com/style/csslibrary/item/pop_up_form_labels
3D Flip Menu
• www.dynamicdrive.com/style/csslibrary/item/3d_flip_menu
Responsive Iconic Menu
• www.dynamicdrive.com/style/csslibrary/item/responsive_iconic_menu
Grayscale Image Gallery
• www.dynamicdrive.com/style/csslibrary/item/grayscale_image_gallery
Flat flipping menu buttons
• www.dynamicdrive.com/style/csslibrary/item/flat_flipping_menu_buttons
CSS3 oval switch checkboxes
• www.dynamicdrive.com/style/csslibrary/item/css3_oval_switch_checkboxes
45+ Best Free Responsive Blogger Templates
• thedesignpixel.com/best-free-responsive-blogger-templates.html
Animated drop-down menu using only CSS3
• basicuse.net/articles/pl/textile/html_css/how_to_create_animated_drop_down_menu_using_only_css3
Dynamic backgrounds on forms
• codepen.io/rlacorne/pen/wnLJH

Bye :-h