Text area dengan CSS

hai sobat blogger semua, kali ini saya akan membahas tentang
cara membuat text area yang punya efek css.......

kalau anda penasaran seperti apa itu text area yang
mempunyai efek css....silahkan lihat contoh nya nih di bawah ini

Nah gimana Apa anda ingin membuat yang seperti itu.....

jika iya silahkan kopy 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>

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>

KETERANGAN

kode yang berwarna merah