Kreasi Tampilan Textarea Dengan CSS3

Halo, jumpa lagi dengan saya 🙂  , Di pertemuan sebelum nya saya telah merancang panduan mengenai Kreasi Radio Button Dengan CSS3, Nah kali ini saya akan merancang panduan mengenai Kreasi Tampilan Textarea Dengan CSS3, seketika saja kita praktikan.

Seperti lazim, langkah pertama-tama terlebih dahulu kita bikin textarea dengan kode HTML berikut.

<h2>Textarea</h2>

<textarea placeholder=Masukan Teks Disini rows=20 cols=40></textarea>

Nah, Kalo telah kini kita bikin style bagi textarea dengan kode CSS3 berikut.

body {background: #F0F0F0;}


h2 {margin-left: 55px;}

textarea {
  margin-top: 10px;
  margin-left: 50px;
  width: 500px;
  height: 100px;
  -moz-border-bottom-colors: none;
  -moz-border-left-colors: none;
  -moz-border-right-colors: none;
  -moz-border-top-colors: none;
  background: none repeat scroll 0 0 rgba(0, 0, 0, 0.07);
  border-color: -moz-use-text-color #FFFFFF #FFFFFF -moz-use-text-color;
  border-image: none;
  border-radius: 6px 6px 6px 6px;
  border-style: none solid solid none;
  border-width: medium 1px 1px medium;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12) inset;
  color: #555555;
  font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
  font-size: 1em;
  line-height: 1.4em;
  padding: 5px 8px;
  transition: background-color 0.2s ease 0s;
}


textarea:focus {
    background: none repeat scroll 0 0 #FFFFFF;
    outline-width: 0;
}

Kalo telah segala duketikan, simpan terlebih dahulu, kemudian coba buka dan jalankan dibrowser masing-masing dan lihat hasilnya, bagi melihat hasilnya seperti apa, silahkan kalian klik di textarea dan lihat perubahan apa yang terjadi 🙂

Bagus samapi disini panduan mengenai Kreasi Tampilan Textarea Dengan CSS3, semoga bermanfaat, amin.

Selamat mencoba 🙂

Sumber https://kursuswebsite.org