Kreasi Tampilan Textarea Dengan CSS3

Halo, jumpa lagi dengan saya   , Pada pertemuan sebelum nya saya telah membuat tutorial mengenai Kreasi Radio Button Dengan CSS3, Nah kali ini saya akan membuat tutorial mengenai Kreasi Tampilan Textarea Dengan CSS3, langsung saja kita praktikan.

Seperti biasa, langkah pertama terlebih dahulu kita buat textarea dengan kode HTML berikut.

<h2>Textarea</h2>

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

Nah, Kalo sudah sekarang kita buat style untuk 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 sudah semua duketikan, simpan terlebih dahulu, kemudian coba buka dan jalankan dibrowser masing-masing dan lihat hasilnya, untuk melihat hasilnya seperti apa, silahkan kalian klik pada textarea dan lihat perubahan apa yang terjadi

Baik samapi disini tutorial mengenai Kreasi Tampilan Textarea Dengan CSS3, semoga bermanfaat, amin.

Selamat mencoba

The post Kreasi Tampilan Textarea Dengan CSS3 appeared first on Kursus Website Terbaik.