Rounded Corner Input

Oleh: Pupung Budi Purnama
July 26, 2007

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:

Rounded Image

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.

Category: Karir | RSS 2.0 | Give a Comment | trackback

7 Comments

Leave a Reply