Cara Memberikan Background Gradient Pada Textarea

Textarea merupakan sebuah inputan yang sering kita gunakan untuk memasukan sebuah text atau script, cara penulisan tag textarea yaitu <textarea>…</textarea>, selain textarea ada juga bagian terpenting yaitu background, karena Background merupakan salah satu komponen yang sangat penting, dan umumnya background digunakan untuk mempercantik atau memperindah tampilan baik itu tampilan website ataupun tampilan yang lainya, sehingga pengunjung merasa nyaman pada saat membuka website yang kita miliki. nah pada tutorial kali ini kita akan mencoba membuat Cara Memberikan Background Gradient Pada Textarea.

Oke teman-teman kita langsung saja masuk ke study casenya tentang Cara Memberikan Background Gradient Pada Textarea. Langkah pertama yaitu silahkan teman-teman buka text editornya jika sudah, kita akan membuat sebuah file index nya terlebih dahulu, dan silahkan teman-teman simpan script yang terdapat dibawah ini dengan nama index.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Cara Memberikan Background Gradient Pada Textarea </title>
	<link rel="stylesheet" href="style.css">
</head>

<body>
	<textarea name="" id="" cols="30" rows="10" placeholder="Silahkan Masukan Text" class="color"></textarea>
</body>
</html>

Setelah kita membuat file index.html selanjutnya kita akan membuat file CSS nya untuk mengatur layout atau tampilan dari background gradient yang ingin kita buat nanti, karena untuk merubah background biasa menjadi background gradient kita menggunakan CSS 3 sebagai property nya, nah untuk membuat file CSS nya silahkan teman-teman simpan script yang terdapat dibawah ini dengan nama style.css

.color {
		  background: red; 
		  background: -webkit-linear-gradient(left top, red, yellow);
		  background: -o-linear-gradient(bottom right, red, yellow); 
		  background: -moz-linear-gradient(bottom right, red, yellow); 
		  background: linear-gradient(to bottom right, red, yellow);
		}

Pada file CSS diatas kita menggunakan sebuah property background: linear-gradient(to bottom right, red, yellow); yang berfungsi untuk mengatur background dari gradient nya, nah teman-teman bisa menganti warna gradient nya sesuai dengan yang teman-teman inginkan .

Jika script diatas kita jalankan pada browser maka akan terlihat hasilnya seperti dibawah ini

Nah bagaimana teman-teman cukup mudah bukan Cara Memberikan Background Gradient Pada Textarea, sekian dulu tutorial saya kali ini tentang Cara Memberikan Background Gradient Pada Textarea.

Semoga bermanfaat

Terimakasih.