Postingan sebelumnya saya sudah membahas mengenai bagaimana cara Membuat Gradient Effect Dengan CSS dan Membuat Bayangan Dengan CSS. Pada postingan kali ini saya akan mengaplikasikan kedua cara yang telah saya tulis sebelumnya ditambah dengan fitur CSS Rounded Corner kedalam sebuah Search Form yang bisa teman-teman gunakan untuk web ataupun blog teman-teman.
Mengenai CSS Rounded Corner kayanya sudah tidak perlu saya bahas lagi karena fungsi ini mungkin sudah umum digunakan, sedangkan untuk teman-teman yang belum mengerti bagaimana membuat Rounded Corner dengan CSS tidak perlu khawatir karena susunan kode CSS untuk search form yang akan saya bahas dibawah sudah saya tambahkan beberapa komentar untuk mempermudah dalam memahaminya.
Search form yang akan saya buat dibawah ini 100% menggunakan fungsi CSS tanpa menggunakan image sebagai background. Search form dibawah ini sangat cocok digunakan bila teman-teman ingin mengurangi penggunaan image pada web atau blog untuk sedikit meringankan loading blog tetapi tetap mempertimbangkan tampilan yang indah. kode CSS yang saya buat sudah disesuaikan dengan browser-browser yang tidak mensupport CSS3, jadi tampilan search form akan tetap proporsional apabila blog atau web kita diakses melalui browser yang tidak mensupport CSS3 walaupun tampilan search form sedikit berbeda. Ok tanpa basa-basi lagi silahkan copy kode dibawah ini untuk membuat search form menggunakan CSS3:
Kode CSS:
/* CSS3 search form
Kode HTML:
-------------------------------------- */
.searchform {
background: #111111;
background: -webkit-gradient(linear, left top, left bottom, from(#111111), to(#555555)); /* CSS gradient */
background: -moz-linear-gradient(top, #111111, #555555); /* CSS gradient */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#111111', endColorstr='#555555'); /* CSS gradient ie7 */
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#111111', endColorstr='#555555'); /* CSS gradient ie8 */
display: inline-block;
zoom: 1; /* hack untuk ie7 */
*display: inline;
border: solid 1px #555555;
padding: 3px 5px;
-webkit-border-radius: 20px; /* rounded corner */
-moz-border-radius: 20px; /* rounded corner */
border-radius: 20px; /* rounded corner */
-webkit-box-shadow: 0 1px 0px rgba(0,0,0,.1); /* CSS shadow */
-moz-box-shadow: 0 1px 0px rgba(0,0,0,.1); /* CSS shadow */
box-shadow: 0 1px 0px rgba(0,0,0,.1); /* CSS shadow */
}
.searchform input {
font: normal 12px Arial, Helvetica, sans-serif;
}
.searchfield {
background: #ededed;
padding: 6px 6px 6px 8px;
width: 200px;
border: solid 1px #222222;
outline: none;
-webkit-border-radius: 20px; /* rounded corner */
-moz-border-radius: 20px; /* rounded corner */
border-radius: 20px; /* rounded corner */
-moz-box-shadow: inset 0 1px 3px #222222; /* CSS shadow */
-webkit-box-shadow: inset 0 1px 3px #222222; /* CSS shadow */
box-shadow: inset 0 1px 3px #222222; /* CSS shadow */
}
.searchbutton {
color: #fff;
border: solid 1px #b80000;
font-size: 11px;
height: 28px;
width: 55px;
text-shadow: 0 1px 1px #222222; /* CSS text shadow */
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
background: #ff0000;
background: -webkit-gradient(linear, left top, left bottom, from(#ff0000), to(#b80000)); /* CSS gradient */
background: -moz-linear-gradient(top, #ff0000, #b80000); /* CSS gradient */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0000', endColorstr='#b80000'); /* CSS gradient ie7 */
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0000', endColorstr='#b80000'); /* CSS gradient ie8 */
}
<form class="searchform">
Preview:
<input class="searchfield" type="text" value="Search..." onfocus="if (this.value == 'Search...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search...';}" />
<input class="searchbutton" type="button" value="Search" />
</form>

Related Posts by Categories
Silahkan klik di sini untuk membaca melalui feed reader anda. Atau masukkan alamat email anda di kolom dibawah ini untuk berlangganan artikel DevBook.net langsung ke alamat email anda.
wah, kotak komentarnya keren banget. Minta kasih tau caranya dong!!!! tapi kode nya banyak gakk???
@Ari Purwoko: untuk kotak komentar saya pake jquery-superbox, kodenya lumayan banyak tapi tidak terlalu susah kok. Coba cari di google dengan kata kunci "jquery-superbox" trus download. mungkin nanti kedepannya saya bahas ya :)
... wow, keren sekali bro, salute deh,
akan kucoba, n lam kenal ya .
@Cygnus: makasih sob, salam kenal juga :)
Postingannya bagus...
mau tanya sob, itu meletakkan kode css/ html nya di mana ya ?
sebelum kode apa gitu ?
lalu kalau mau bikin kotak pencarian sejajar dengan navigasi horizontal menu gmn ?
@Fajri Tkj: menyimpan code css nya bisa dimana aja asal dibagian code css, untuk htmlnya dipasang sesuai keinginan kita. misalnya kalo mau dipasang di navbar berarti pasang kode htmlnya di antara div navbar..
biar sejajar bisa pake float:right untuk search formnya dan float left untuk menunya..
bos ane coba tapi bingung....
ane pake co.cc tpi yang gratisan trus 000webhost.com.....
gimana tuh caranya...ane bru belajar ni..
pas ane coba malah jadi berantakan gak karuan gitu....tolong ya bos....
oh iya salam kenal bos
Klo Di Tambahin Text Shadow CSS3 Gimana Yah
Journalist blog: tentu saja bisa dengan membuat div atau class baru, silahkan baca postingan saya yang membahas tentang text shadow
masih bingung nih. kode CSS & Script HTML nya udah dipasang. terus pas aku nyoba seacrh gak bisa. gak ada hasil.
kapan-kapan boleh dicoba nih gan... :)