Cara Membuat Desain Form dengan CSS3

Form merupakan sebuah elemen dimana kita bisa melakukan sebuah inputan, agar terlihat menarik ketika melakukan inputan pada form sebaiknya kita desain tampilan form semenarik mungkin agar tidak bosan untuk melakukan pengisian form 🙂 . Nah berikut ini saya akan kasih tutorial mengenai bagaimana Cara Membuat Desain Form dengan CSS3. Simak langkah-langkahnya berikut ini.

Untuk membuat sebuah form inputan pertama kita tentu buat elemen inputan dengan sintak HTML5 berikut ini.

<body>
	<div class="container">
	  <h2>Material Design - Form<small>[CSS3]</small></h2>
	  <form>
	    <div class="group">      
	      <input type="text" required>
	      <span class="highlight"></span>
	      <span class="bar"></span>
	      <label>Name</label>
	    </div>
	      
	    <div class="group">      
	      <input type="text" required>
	      <span class="highlight"></span>
	      <span class="bar"></span>
	      <label>Email</label>
	    </div>
	  </form>
	</div>
</body>

Setelah kita membuat struktur dan membuat tampilan form seperti diatas, barulah kita desain tampilan form diatas dengan sintak CSS3 berikut ini.

* { box-sizing:border-box; }

/* basic stylings ------------------------------------------ */
body { background:url(https://scotch.io/wp-content/uploads/2014/07/61.jpg); }
.container { 
  font-family:'Roboto';
  width:600px; 
  margin:30px auto 0; 
  display:block; 
  background:#FFF;
  padding:10px 50px 50px;
}
h2 { 
  text-align:center; 
  margin-bottom:50px; 
}
h2 small { 
  font-weight:normal; 
  color:#888; 
  display:block; 
}
.footer { text-align:center; }
.footer a { color:#53B2C8; }

/* form starting stylings ------------------------------- */
.group { 
  position:relative; 
  margin-bottom:45px; 
}
input {
  font-size:18px;
  padding:10px 10px 10px 5px;
  display:block;
  width:300px;
  border:none;
  border-bottom:1px solid #757575;
}
input:focus { outline:none; }

/* LABEL ======================================= */
label {
  color:#999; 
  font-size:18px;
  font-weight:normal;
  position:absolute;
  pointer-events:none;
  left:5px;
  top:10px;
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
}

/* active state */
input:focus ~ label, input:valid ~ label {
  top:-20px;
  font-size:14px;
  color:#5264AE;
}

/* BOTTOM BARS ================================= */
.bar { position:relative; display:block; width:300px; }
.bar:before, .bar:after {
  content:'';
  height:2px; 
  width:0;
  bottom:1px; 
  position:absolute;
  background:#5264AE; 
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
}
.bar:before {
  left:50%;
}
.bar:after {
  right:50%; 
}

/* active state */
input:focus ~ .bar:before, input:focus ~ .bar:after {
  width:50%;
}

/* HIGHLIGHTER ================================== */
.highlight {
  position:absolute;
  height:60%; 
  width:100px; 
  top:25%; 
  left:0;
  pointer-events:none;
  opacity:0.5;
}

/* active state */
input:focus ~ .highlight {
  -webkit-animation:inputHighlighter 0.3s ease;
  -moz-animation:inputHighlighter 0.3s ease;
  animation:inputHighlighter 0.3s ease;
}

/* ANIMATIONS ================ */
@-webkit-keyframes inputHighlighter {
	from { background:#5264AE; }
  to 	{ width:0; background:transparent; }
}
@-moz-keyframes inputHighlighter {
	from { background:#5264AE; }
  to 	{ width:0; background:transparent; }
}
@keyframes inputHighlighter {
	from { background:#5264AE; }
  to 	{ width:0; background:transparent; }
}

Setelah semua sintak diatas kalian ketikan semua, selanjutnya simpan file dengan format html kemudian buka pada browser masing-masing dan lihat hasilnya. Maka akan terlihat desain form inputan yang cukup menarik dan terlihat ada efeknya. Baik cukup sekian tutorial mengenai bagaimana Cara Membuat Desain Form dengan CSS3. Semoga bermanfaat dan selamat mencoba 🙂