The Great Search Box for You

Sudah berapa biji artikel tentang membuat form search engines Koben bagi? Tidak terbilang berapa saya sudah memosting mengenai tema itu ;)) Ketikan pada kotak pencarian blog ini dengan keyword form search! Dari yang sederhana, sampai tingkat gaya edan punya sudah terwakilkan :D Lagi² karena blogwalking, kembali Beben Koben akan mengangkat tema serupa :"> Tapi masih saja ada web/blog yg tidak menyediakan sarana search box ini :-?? Dikasih saja masih kebelinger mencari-cari topik sasaran 8-|
Berawal BW menclok di How to Create a 3D Search Bar in HTML/CSS created by master @sanjaykhemlani Beliau berkreasi membuat kotak pencarian dengan menyertakan 2 buah gambar, dan kode yg sedikit guna menghasilkan efek serupa kalau kita membuatnya full 100% memakai CSS3 #-o

Sekarang bandingkan kreasi master @netastica dalam tutorial Creating A Rocking CSS3 Search Box. Murni memakai attribute CSS 3 tanpa gambar untuk menciptakan itu semua :-B
Bila tangan² seni developer sudah bermain, selalu saja ada yg full stylish :P Satu lagi tidak akan mengecewakan deh sob :">

CSS Coded

.form {
width: 410px;
padding: 8px;
height: 42px;
border-width: 1px;
border-style: solid;
border-color: #A3E7F7 #B9EDF9 #A3E7F7 #B9EDF9;
-moz-box-shadow: 0 3px 3px rgba(158,222,238,.1), 0 3px 0 #9EDEEE, 0 4px 0 #B5E6F2, 0 5px 5px #999;
-webkit-box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #B5E6F2, 0 5px 5px #999;
box-shadow: 0 3px 3px rgba(158,222,238,.1), 0 3px 0 #9EDEEE, 0 4px 0 #B5E6F2, 0 5px 5px #999;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
background: #C2F0FB;
}
#search {
width: 310px;
height: 42px;
padding: 5px 0 0 7px;
font: bold 20px serif;
float: left;
border: 1px solid #9EDEEE;
-webkit-box-shadow: inset 0 6px 0 #9EDEEE;
-moz-box-shadow: inset 0 6px 0 #9EDEEE;
box-shadow: inset 0 6px 0 #9EDEEE;
-webkit-border-top-left-radius: 3px;
-webkit-border-bottom-left-radius: 3px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-bottomleft: 3px;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
#submit {
float: right;
border: 1px solid #77D780;
height: 39px;
width: 100px;
padding: 0;
cursor: pointer;
font: bold 15px Arial, Helvetica;
color: #53BF5C;
text-transform: uppercase;
background: #8AE793;
text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.7), 0 -1px 0 rgba(0, 0, 0, 0.3);
-webkit-border-top-right-radius: 3px;
-webkit-border-bottom-right-radius: 3px;
-moz-border-radius-topright: 3px;
-moz-border-radius-bottomright: 3px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
-moz-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 0 2px rgba(255, 255, 255, 0.7), 0 5px 0 #70D279;
-webkit-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 5px 0 #70D279;
box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 0 2px rgba(255, 255, 255, 0.7), 0 3px 0 #70D279;
}
#submit:hover {
background: #8AE793;
position: relative;
top: 1px;
border: 1px solid #77D780;
}

HTML Coded

<form class="form" action="" method="get">
        <input type="text" id="search" placeholder="Search for..." required="" />
        <input type="submit" value="go" id="submit" />
</form>

Seru tapi pusing =))
Happy search \m/