Membuat Tampilan Form Input Transparan Menggunakan CSS

Hallo teman-teman, kembali lagi di Dumetschool.com . Artikel kali ini saya akan membahas tentang bagaimana cara Membuat Tampilan Form Input Transparan Menggunakan CSS.  Ada dua properti style CSS yang dapat kita gunakan untuk membuat background yang transparan yaitu menggunakan properti opacity dan background color dengan nilai rgba.

Disini saya akan jelaskan sedikit tentang perbedaan kedua property ini. Properti opacity pada css berfungsi untuk memberikan efek transparan pada semua elemen-elemen yang ada di dalamnya. Sedangkan property background color dengan nilai rgba memberikan efek transparan hanya di pembungkusnya saja dan tidak mempengaruhi elemen-elemen yang ada di dalamnya. Disini saya akan menggunakan property background color dengan nilai rbga untuk Membuat Tampilan Form Input Transparan Menggunakan CSS agar tidak mempengaruhi tulisannya dan tulisan dapat terlihat jelas. Langsung saja kita buat struktur htmlnya seperti pada script di bawah ini.

<!Doctype html>
<html>
<head>
	<title>Background</title>
	<style type="text/css">
		body {background: url(../images/plaid.jpg);}
	</style>
</head>
<body>
	<table >
		<tr>
			<td>FORM INPUT</td>
		</tr>
		<tr>
			<td><input type="text"></td>
		</tr>
		<tr>
			<td><input type="text"></td>
		</tr>
		<tr>
			<td><input type="text"></td>
		</tr>
		<tr>
			<td><textarea></textarea></td>
		</tr>
		<tr>
			<td><button>Submit</button></td>
		</tr>
	</table>
</body>
</html>

Setelah selesai maka tampilan akan menjadi seperti pada gambar di bawah.

Lalu kita tambahkan script css untuk membuat background transparan dan berikut script cssnya.

<style type="text/css">
	body {background: url(../images/plaid.jpg); color:white;}
	table {padding:10px; text-align: center;}
	table, input, textarea, button {background: rgba(51, 51, 51, 0.5);}
	input, textarea {border:0px; width: 100%;}
</style>

Setelah selesai maka tampilan form input akan menjadi pada gambar di bawah ini teman-teman.

Karena kita menggunakan properti background color dengan nilai rgba maka elemen yang ada di form input atau tulisannya tidak akan ikut transparan. Nah disini teman-teman bisa perhatikan di script cssnya, dimana tingkat transparan yang saya pakai 0.5 pada form inputnya. Dimana jika mendekati 0 maka tingkat transparan akan semakin naik sedangkan mendekati 1 tingkat tranparan semakin turun.

Demikian tutorial tentang cara Membuat Tampilan Form Input Transparan Menggunakan CSS. Semoga bermanfaat dan selamat mencoba.