Selasa, 23 September 2014

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...
    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

Tidak ada komentar:

Posting Komentar