Membuat textarea efek css3

Hai sobat blogger semua, kali ini saya akan membahas tentang, cara membuat text area yang punya efek keren hanya dengan css, kalau anda penasaran seperti apa itu text area yang mempunyai efek css, silahkan lihat demonya.

DEMO

Nah gimana Apa anda ingin membuat yang seperti itu, Jika iya silahkan copy kode di bawah ini di blog anda. Jika di sidebar anda hanya tinggal menambah kode HTML/JAVASCRIPT saja, jika di postingan anda hanya perlu beralih ke mode edit html dan pastekan kode nya disitu, ini kode nya

<style type="text/css">
textarea.systemarea {
       font-size: 14px;
       font-family: Arial, Tahoma, Helvetica;
       border: 0px solid transparent;
       outline: none;
       border: 5px solid;
       border-color: #ccc #aaa #aaa #ccc;
       border-radius: 12px; 
      -moz-border-radius: 12px; 
      -webkit-border-radius: 12px;     
       background: #eee; 
       box-shadow: -1px -1px 1px #533801, 1px 1px 1px #533801, 1px 1px 10px #555;  
      -moz-box-shadow: -1px -1px 1px #000, 1px 1px 1px #000, 1px 1px 10px #000; 
      -webkit-box-shadow: -1px -1px 1px #000, 2px 1px 1px #000, 1px 1px 10px #000;
       text-shadow: 0px -1px 0px #999;
       padding: 5px 5px 2px;
       color: black;
       margin: 15px 5px;
      -o-transition: all 1s ease-out;
      -moz-transition: all 1s ease-out;
      -webkit-transition: all 1s ease-out;   
}
textarea.systemarea:hover {
       border-color: #ff0000 #ff0000 #ff0000 #ff0000;
       border-radius: 8px; 
      -moz-border-radius: 8px; 
      -webkit-border-radius: 8px;     
       background: #000; 
       color: gray;
       text-shadow: 0px 0px 0px;
       box-shadow: -1px -1px 1px #00ff00, 1px 1px 1px #00ff00, 1px 1px 20px #00ff00;  
      -moz-box-shadow: -1px -1px 1px #ff0000, 1px 1px 1px #ff0000, 1px 1px 20px #ff0000; 
      -webkit-box-shadow: -1px -1px 1px #000000, 1px 1px 1px #000000, 1px 1px 20px #000000;
}
</style>

<textarea class="systemarea" rows="9" cols="70">DISINI SILAHKAN ANDA ISI DENGAN KATA KATA ATAU PUN KODE HTML, SCRIPT DLL
</textarea>

Pengaturan kode

9 adalah tinggi textarea
70 adalah lebar textarea

Masih ada yang bisa anda edit dari kode-kode di atas, silahkan anda edit warna2 nya sesuai warna yg anda suka anda bisa edit bagian2 yang berwarna merah tersebut, untuk kode warna silahkan lihat di KODE WARNA

Sumber: Gubhugreyot