Recent Post

Sponsored

Labels

addressbook Membuat Search Form Dengan CSS3

Diposting oleh dev | , , | 11 komentar »

CSS3 Search Form 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
-------------------------------------- */
.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 */
}
Kode HTML:
<form class="searchform">
<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>
Preview:

search form
Mudah-mudahan search form di atas bermanfaat buat teman-teman semua dan dapat sedikit memperindah tampilan web atau blog teman-teman. Bila ada yang kesulitan dalam mengaplikasikannya silahkan tanyakan melalui kotak komentar atau melalui contact form blog ini, sebisanya pasti akan saya bantu :)

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.

feed

Page copy protected against web site content infringement by Copyscape

Ada 11komentar ke “Membuat Search Form Dengan CSS3”
Ari Purwoko said...
 date:

wah, kotak komentarnya keren banget. Minta kasih tau caranya dong!!!! tapi kode nya banyak gakk???

dev said...
 date:

@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 :)

Cygnus said...
 date:

... wow, keren sekali bro, salute deh,
akan kucoba, n lam kenal ya .

dev said...
 date:

@Cygnus: makasih sob, salam kenal juga :)

Fajri Tkj said...
 date:

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 ?

dev said...
 date:

@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..

belalangtue said...
 date:

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

Journalist Blog said...
 date:

Klo Di Tambahin Text Shadow CSS3 Gimana Yah

dev said...
 date:

Journalist blog: tentu saja bisa dengan membuat div atau class baru, silahkan baca postingan saya yang membahas tentang text shadow

Oalld said...
 date:

masih bingung nih. kode CSS & Script HTML nya udah dipasang. terus pas aku nyoba seacrh gak bisa. gak ada hasil.

Dukun Design said...
 date:

kapan-kapan boleh dicoba nih gan... :)


leave comment
back to top
comment notes

Post a Comment

devbook.net