Membuat Kolom Search Animasi CSS - Hallo sahabat Jendela Dunia Internet Dan Tekhnologi, Pada Artikel yang anda baca kali ini dengan judul Membuat Kolom Search Animasi CSS, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel Bootstrap, Artikel Web Design, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Membuat Kolom Search Animasi CSS
link : Membuat Kolom Search Animasi CSS

Membuat Kolom Search Animasi CSS

Membuat Kolom Search Animasi CSS - Halo Gengs, apa kabarnya nihh? Juragan mau berbagi nih, membuat kolom pencaria yang kece banget deh, simple tapi cantik banget macam Raisa campur Isyana. hasilnya begini nih :

Seperti biasa, kamu harus menuliskan code HTML supaya mudah di preview sebelum di styling menggunakan CSS, dan karena kita menggunakan icon search-nya Font Awesome, kamu harus bikin koneksi Font Awesome.

<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"></link>

Lanjut ke HTML-nya gengs

<form>
<fieldset>
<input type="search" /><button type="submit"><i class="fa fa-search"></i></button>
</fieldset>
</form>

Setelah membuat code HTML, tuliskan code form berikut

fieldset {
  position: relative;
  display: inline-block;
  padding: 0 0 0 40px;
  background: white;
  border: 1px solid #3A539B;
  border-radius: 5px;
}
input,
button {
  position: relative;
  width: 200px;
  height: 50px;
  padding: 0;
  display: inline-block;
  float: left;
}
input {
  color: #666;
  z-index: 2;
  border: 0 none;
}
input:focus {
  outline: 0 none;
}
input:focus + button {
  -webkit-transform: translate(0, 0);
      -ms-transform: translate(0, 0);
          transform: translate(0, 0);
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
}
input:focus + button .fa {
  -webkit-transform: translate(0px, 0);
      -ms-transform: translate(0px, 0);
          transform: translate(0px, 0);
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
  color: white;
}
button {
  z-index: 1;
  width: 50px;
  border: 0 none;
  background: #3A539B;
  -webkit-transform: translate(-50px, 0);
      -ms-transform: translate(-50px, 0);
          transform: translate(-50px, 0);
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
}
.fa-search {
  font-size: 1.4rem;
  color: #BBB;
  z-index: 3;
  top: 25%;
  -webkit-transform: translate(-190px, 0);
      -ms-transform: translate(-190px, 0);
          transform: translate(-190px, 0);
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
  -webkit-transition: all 0.1s ease-in-out;
          transition: all 0.1s ease-in-out;
}

Oke Gengs?. keren kan? kece kan?, yo wes lah Juragan pamit sek :D See you

Demikianlah Artikel Membuat Kolom Search Animasi CSS

Sekianlah artikel Membuat Kolom Search Animasi CSS kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Membuat Kolom Search Animasi CSS dengan alamat link http://jendeladuniainternet.blogspot.com/2015/11/membuat-kolom-search-animasi-css.html

Tweet