Cara Membuat Animasi Form Pencarian

Hai, ketemu lagi dengan saya 🙂 , Dalam membuat website tentunya kita menginginkan tampilan yang sangat menarik dan tidak bosan untuk dilihat, Nah berikut ini saya akan bagikan tutorial mengenai Cara Membuat Animasi Form Pencarian, untuk kalian yang ingin bentuk form pencarian terlihat lebih bagus, tidak ada salahnya untuk menggunakan cara berikut ini.

Baik, pertama kita akan buat bentuk form biasa dengan menggunakan kode HTML5 berikut ini.

<h1>Animasi Form Pencarian</h1>
<h3>Demo</h3>
<form id="demo-2">
	<input type="search" placeholder="Search">
</form>

Setelah itu, baru kita akan desain tampilan form diatas dengan kode CSS3 berikut.

body {
	background: #fff;
	color: #666;
	font: 90%/180% Arial, Helvetica, sans-serif;
	width: 800px;
	max-width: 96%;
	margin: 0 auto;
}

input[type=search] {
	-webkit-appearance: textfield;
	-webkit-box-sizing: content-box;
	font-family: inherit;
	font-size: 100%;
}
input[type=search] {
	background: #ededed url(http://static.tumblr.com/ftv85bp/MIXmud4tx/search-icon.png) no-repeat 9px center;
	border: solid 1px #ccc;
	padding: 9px 10px 9px 32px;
	width: 55px;
	
	-webkit-border-radius: 10em;
	-moz-border-radius: 10em;
	border-radius: 10em;
	
	-webkit-transition: all .5s;
	-moz-transition: all .5s;
	transition: all .5s;
}
input[type=search]:focus {
	width: 130px;
	background-color: #fff;
	border-color: #66CC75;
	
	-webkit-box-shadow: 0 0 5px rgba(109,207,246,.5);
	-moz-box-shadow: 0 0 5px rgba(109,207,246,.5);
	box-shadow: 0 0 5px rgba(109,207,246,.5);
}

/* Demo 2 */
#demo-2 input[type=search] {
	width: 15px;
	padding-left: 10px;
	color: transparent;
	cursor: pointer;
}
#demo-2 input[type=search]:hover {
	background-color: #fff;
}
#demo-2 input[type=search]:focus {
	width: 130px;
	padding-left: 32px;
	color: #000;
	background-color: #fff;
	cursor: auto;
}
#demo-2 input:-moz-placeholder {
	color: transparent;
}
#demo-2 input::-webkit-input-placeholder {
	color: transparent;
}

Nah, kalo sudah semua diketikan, simpan terlebih dahulu, kemudian coba buka dan jalankan dibrowser masing-masing dan lihat hasilnya.

Bagaimana, bagus bukan ? baik sampai disini tutorial mengenai Cara Membuat Animasi Form Pencarian, semoga bermanfaat, amin.

Selamat mencoba 🙂

Kategori