Rounded Corner Input
Saya pernah telibat dalam sebuah project yang memerlukan membuat input form dengan sudut tumpul, setelah mancari di Google saya tidak menemukan jawaban yang diinginkan (karena kebanyakan menawarkan menggunakan Javascript dan Mozilla CSS), akhirnya saya mencoba membuat input form dengan teknik yang sederhana.
Ide dari input form ini sebenarnya sangat sederhana, yaitu dengan membuat image yang dibuat sebagai background dari input, lalu input ini kita samarkan. Jadi pada hasil akhir, yang kita lihat hanyalah image background saja.
Pertama, saya masukan tag input kedalam sebuah div:
<div class="rounded">
<input type="text" name="address" />
</div>Lalu buat image seperti dibawah:
Dan kemudian kode CSS nya:
input {
border: none;
background: #FFF;
width: 165px;
}
.rounded {
background: url(rounded.gif) no-repeat left top;
padding: 8px;
}
Anda dapat melihat hasil dari Implementasinya disini. (Pupung Budi Purnama)
Tentang Penulis
Pupung Budi Purnama - Bukan pakar atau ahli, hanya seorang freelance web designer, tinggal di Bandung, Jawa Barat. Bergelut di dunia web sejak 1999, pernah bekerja di beberapa perusahaan IT sebagai desainer. Sehari-hari, ia menjalankan sebuah perusahaan web development dari kamarnya.
7 Comments
Safari 2 gak bisa di set border input atau textarea. Jadi untuk mengatasi itu harus menggunakan style sheet yang berbeda untuk safari. Atau input textnya jadi terlihat aneh.
Iya, safari terlihat border kalau kita ngisi form ya? sepertinya harus ditambah :focus ya?
kalau bentuk formnya flexibel buatnya gimana ya?
informasi yang menarik, Trims.
di buat aja global setting css buat focusnya, supaya gak muncul di safari
:focus {
outline: 0px;
}
cool, boleh juga buat nyesuain design yang ada. thanx bro
salam kenal bro….