Membuat form cantik dengan css

Indonesian (Bahasa Indonesia) translation by ⚡ Rova Rindrata (you can also view the original English article)

Table of Contents Show

Langkah 1: HTML
Screencast Penuh
Langkah 2: Penataan Dasar
Langkah 3: Box-shadow
Langkah 4: Latar Belakang Gradien
Langkah 5: Browser Lainnya
Pratinjau Akhir

Berkat properti CSS yang canggih, seperti gradien dan bayangan, sekarang cukup mudah untuk mengubah bentuk web yang membosankan menjadi sesuatu yang indah – dengan sedikit usaha. Saya akan menunjukkan pada Anda di tutorial hari ini!

Tutorial ini mencakup screencast yang tersedia untuk anggota Tuts+ Premium.

Gradien latar belakang yang halus memberi kedalaman pada bidang sementara bayangan mengangkatnya dari halaman. Yang lebih mengesankan lagi adalah bahwa hal ini dilakukan tanpa gambar sama sekali.

Dengan mengikuti tutorial ini Anda tidak hanya akan berakhir dengan bentuk yang ringan dan indah, Anda juga akan belajar dan memahami teknik CSS3 yang baru, seperti bayangan kotak, gradien, warna buram, dan sudut yang membulat.

CSS3?

CSS3 adalah generasi CSS berikutnya yang saat ini dalam pengembangan, tapi itu tidak menghentikan browser dalam menerapkan banyak fitur menonjol.

Google Chrome (4.0)
Mozilla Firefox (3.6)
Safari (4.0)

Opera memiliki tingkat dukungan CSS3 yang lebih tinggi (kecuali gradien latar belakang) di versi berikutnya (10.50 Beta).

Internet Explorer juga menyatakan bahwa mereka akan memperbaiki dukungan CSS3 dengan versi 9; namun, hanya waktu yang akan mengatakan betapa benarnya hal ini.

Hal-hal yang dapat Anda lakukan dengan CSS3 (bayangan, gradien, sudut bulat, animasi, dll) semuanya berfungsi untuk menciptakan efek yang indah tanpa harus mengintegrasikan gambar atau skrip, sehingga menghasilkan waktu loading lebih cepat.

Langkah 1: HTML

Sebelum kita mulai styling kita butuh sesuatu untuk ditata, jadi inilah form-nya.

  
<form class="form"> 
  
  <p class="name"> 
		<input type="text" name="name" id="name" /> 
		<label for="name">Name</label> 
	</p> 
  
	<p class="email"> 
		<input type="text" name="email" id="email" /> 
		<label for="email">E-mail</label> 
	</p> 
  
	<p class="web"> 
		<input type="text" name="web" id="web" /> 
		<label for="web">Website</label> 
	</p> 
  
	<p class="text"> 
		<textarea name="text"></textarea> 
	</p> 
  
	<p class="submit"> 
		<input type="submit" value="Send" /> 
	</p> 
  
</form>

Setiap field ada di dalam paragraf dengan kelasnya sendiri, dan tiga field pertama memiliki label yang menjelaskan penggunaannya.

Bagaimana tampilannya tanpa gaya apapun?

Fungsional, tapi membosankan. Mari mulai menghias form ini.

Screencast Penuh

Langkah 2: Penataan Dasar

Sebelum kita menyelami teknik CSS3 kita perlu membuat tata letak dasar untuk browser yang belum mendukung CSS3.

  
input, textarea { 
	padding: 9px; 
	border: solid 1px #E5E5E5; 
	outline: 0; 
	font: normal 13px/100% Verdana, Tahoma, sans-serif; 
	width: 200px; 
	background: #FFFFFF; 
	} 
  
textarea { 
	width: 400px; 
	max-width: 400px; 
	height: 150px; 
	line-height: 150%; 
	} 
  
input:hover, textarea:hover, 
input:focus, textarea:focus { 
	border-color: #C9C9C9; 
	} 
  
.form label { 
	margin-left: 10px; 
	color: #999999; 
	} 
  
.submit input { 
	width: auto; 
	padding: 9px 15px; 
	background: #617798; 
	border: 0; 
	font-size: 14px; 
	color: #FFFFFF; 
	}

Bagaimana usaha kita terlihat sejauh ini?

Lumayan. Sekarang, mari kita mulai peningkatan kita dengan CSS3 yang lebih canggih.

Langkah 3: Box-shadow

Box-shadow melakukan persis seperti apa kedengarannya: menciptakan bayangan di sekitar kotak.

Sintaks untuk box-shadow cukup sederhana:

  
box-shadow: <color> <horizontal offset> <vertical offset> <blur>;

Horisontal offset adalah penempatan bayangan dari kiri ke kanan. Jika Anda menetapkannya ke "2px" bayangan akan menjadi 2 piksel ke kanan. Vertikal offset adalah sama tapi naik/turun.

Blur hanyalah jumlah blur bayangan yang akan ada, di mana 0 adalah minimum.

Beginilah bayangan kotak kita akan terlihat:

  
input, textarea { 
	box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; 
	-moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; 
	-webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; 
	}

Di sini kita memiliki tiga garis yang terlihat serupa.

box-shadow adalah CSS3 murni dan sejauh ini hanya digunakan di Opera.
-webkit-box-shadow ditujukan untuk browser yang menggunakan mesin Webkit, seperti Chrome dan Safari.
-moz-box-shadow ditujukan untuk browser yang menggunakan mesin Gecko dari Mozilla, seperti Firefox, Camino, Flock, dan SeaMonkey.

Sampai CSS3 menjadi standar, Anda harus menggunakan ketiga metode tersebut. Internet Explorer memiliki cara mereka sendiri yang aneh dalam melakukan sesuatu, dan meski bisa menghasilkan bayangan tidak akan terlihat seperti yang kita inginkan. 3

Anda mungkin memperhatikan bahwa tidak ada warna RGB normal yang digunakan, ini karena kita menggunakan dua teknik CSS3 pada baris yang sama: box-shadow dan rgba.

RGBA (Red Green Blue Alpha) adalah, sederhananya, warnai dengan kegelapan.

Sintaks untuk rgba adalah ini:

  
rgba(<red>,<green>,<blue>,<opacity>);

Tidak apa-apa menggunakan abu-abu muda untuk warna bayangan, tapi jika Anda menggunakan latar belakang selain putih maka akan terlihat aneh. Hitam buram di sisi lain akan bekerja dengan baik tidak peduli latar belakangnya.

Jadi bayangan kotak kita berwarna hitam dengan kegelapan 10% (0,1), tanpa offset horizontal dan vertikal, dan dengan blur 8 piksel. Ini akan terlihat seperti ini:

Kata kunci di sini adalah kehalusan. Jika kita menerapkan terlalu banyak bayangan, akan terlihat jelek; jika kita menerapkan terlalu sedikit, tidak akan berpengaruh. Pada dasarnya, kita tidak ingin ada yang melihat bayangannya, tapi tetap mengangkat field dari halaman.

Langkah 4: Latar Belakang Gradien

Sementara sintaks box-shadow mudah dipahami, gradien lebih rumit. Dengan gradien CSS3, Anda dapat membuat beberapa bentuk menakjubkan — dari papan dart hingga pelangi — juga Anda bisa membayangkannya memiliki sintaks yang lebih kompleks. Syukurlah, kita tidak perlu mengkode pelangi hari ini; kita hanya butuh gradien linier lurus.

Sintaks untuk Webkit:

  
-webkit-gradient( linear, <start>, <end>, from(<color>), to(<color>) )

Sintaks untuk Gecko:

  
-moz-linear-gradient(<start> <angle>, <color>, <color>)

Seperti yang bisa Anda lihat, metodenya sangat berbeda, jadi ini memerlukan beberapa penjelasan.

Gradien Webkit memerlukan titik awal (X dan Y), titik akhir (X dan Y), warna awal, dan warna akhir. Sudutnya ditentukan oleh di mana awal dan akhir, dan gradien akan diwarnai dengan "from(color)" memudar ke "to(color)".

Gradien Gecko, di sisi lain, hanya membutuhkan titik awal (Y), dan setidaknya dua warna. Jika Anda menginginkan gradien dari atas ke bawah (90deg) Anda tidak perlu menetapkan sudutnya.

Jadi untuk mendapatkan gradien linier sederhana dari atas ke bawah — hitam ke putih — kita akan melakukan seperti ini:

  
background: -webkit-gradient(linear, left top, left bottom, from(#000000), to(#FFFFFF)); 
background: -moz-linear-gradient(top, #000000, #FFFFFF);

Dan akan terlihat seperti ini:

(Saya akan terus menggunakan warna hitam untuk demonstrasi; pada akhirnya, saya akan beralih ke warna sebenarnya yang akan kita gunakan untuk form ini.)

Sekarang setelah kita menyingkirkan dasar-dasarnya, kita bisa mulai membuat form seperti apa yang kita inginkan. Hal pertama yang ingin kita lakukan adalah membatasi tinggi gradien sehingga terlihat sama untuk field input dan textarea; jika tidak gradien akan memenuhi seluruh tinggi, seperti ini:

Ini adalah bagaimana kita membatasi gradien latar belakang ke 25px di Webkit dan Firefox:

  
input, textarea { 
	background: -webkit-gradient(linear, left top, left 25, from(#000000), to(#FFFFFF)); 
	background: -moz-linear-gradient(top, #000000, #FFFFFF 25px); 
	}

Untuk Webkit, alih-alih mengatur titik akhir ke "left bottom," kita menetapkannya ke "left 25", yang mengindikasikan bahwa akan berakhir 25 piksel dari atas.

Untuk Gecko, kita melakukan hal yang sama dengan menambahkan nilai "25px" ke warna akhir.

Dan hasilnya adalah:

Hal kedua yang ingin kita lakukan adalah membuat garis putih tipis di bagian atas gradien, untuk memberi kesan visual yang halus bahwa field-nya terangkat. Seberapa pentingkah satu piksel? Lihatlah artikel ini: Menambahkan Kedalaman dengan Karya Garis Pixel Sempurna.

Untuk membuat ini, kita membutuhkan tiga poin dalam gradien. Pada contoh sebelumnya, gradien kita memiliki dua poin: atas dan bawah (hitam→putih). Di sini, kita akan menambahkan titik tambahan di antara mereka (putih→hitam→putih).

Untuk menggambarkan:

Bagaimana kita melakukan ini?

  
input, textarea { 
	background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #000000), to(#FFFFFF)); 
	background: -moz-linear-gradient(top, #FFFFFF, #000000 1px, #FFFFFF 25px); 
	}

Di WebKit kita menggunakan fungsi color-stop, tapi sayangnya tidak mendukung nilai dalam pixel, hanya persentase. Namun, dengan memperhatikan pelajaran matematika di sekolah, kita memperkirakan bahwa 4% dari 25px adalah 1px.

Untuk Gecko, kita hanya menambahkan warna ketiga di antara dua yang pertama dan memberikan nilai "1px", yang menunjukkan bahwa ia harus mengakhiri 1 piksel dari atas.

Garis putih tipis:

Sekarang, mari kita mengubah warna hitam (#000000) ke abu abu yang lebih pas (#EEEEEE):

Hanya beberapa detail pekerjaan kecil yang tersisa.

Pertama, kita akan membuat bayangan gelap untuk field saat pengguna hover atau memilihnya:

  
input:hover, textarea:hover, 
input:focus, textarea:focus { 
	-webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 8px; 
	}

Ini hanya meningkat dari 10% menjadi 15%, tapi apa yang kita cari adalah, sekali lagi, kehalusan.

Hal terakhir yang kita lakukan adalah membuat beberapa sudut yang membulat untuk button3 agar lebih menonjol dari elemen lainnya:

  
.submit input { 
	-webkit-border-radius: 5px; 
	-moz-border-radius: 5px; 
	}

Nilai adalah radius sudutnya akan dibulatkan. border-radius standar sengaja ditinggalkan karena Opera tampaknya memiliki masalah dengan hal itu.

Hasil:

Langkah 5: Browser Lainnya

Sekarang kita hanya perlu mengurus browser yang belum mendukung CSS3 (IE), atau yang hanya sebagian saja (Opera).

Kita ingin versi yang berbeda (CSS3 dan yang normal) terlihat semirip mungkin, dan yang paling sederhana adalah kembali ke cara lama: gambar.

Cukup mengambil screenshot dari form CSS3 yang indah dan menyimpan sebagian kecil gradien sebagai gambar.

Selanjutnya, gunakan di input dan textarea sebagai latar belakang. Selama gradien CSS3 muncul setelah gambar latar belakang, browser yang mendukung CSS3 akan mengabaikan gambar itu.

  
input, textarea { 
	background: #FFFFFF url('bg_form.png') left top repeat-x; 
	}

Dan sekarang kita selesai! Nikmati form Anda dan semoga Anda telah belajar sesuatu.

Pratinjau Akhir

Chrome (4.0), Firefox (3,6), Safari (4.0):

Opera (10.50b):

Internet Explorer (8):

CSS Penuh

  
input, textarea { 
	padding: 9px; 
	border: solid 1px #E5E5E5; 
	outline: 0; 
	font: normal 13px/100% Verdana, Tahoma, sans-serif; 
	width: 200px; 
	background: #FFFFFF url('bg_form.png') left top repeat-x; 
	background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF)); 
	background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px); 
	box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; 
	-moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; 
	-webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; 
	} 
  
textarea { 
	width: 400px; 
	max-width: 400px; 
	height: 150px; 
	line-height: 150%; 
	} 
  
input:hover, textarea:hover, 
input:focus, textarea:focus { 
	border-color: #C9C9C9; 
	-webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 8px; 
	} 
  
.form label { 
	margin-left: 10px; 
	color: #999999; 
	} 
  
.submit input { 
	width: auto; 
	padding: 9px 15px; 
	background: #617798; 
	border: 0; 
	font-size: 14px; 
	color: #FFFFFF; 
	-moz-border-radius: 5px; 
	-webkit-border-radius: 5px; 
	}

Kesimpulan

Itu saja yang ada untuk itu! Dengan sedikit usaha, dan kekuatan CSS 3, kita telah mengubah form hambar dan biasa menjadi sesuatu yang indah. Terima kasih banyak untuk membaca, dan silakan mengajukan pertanyaan yang mungkin Anda miliki di bawah ini.