Yudi Moro blog: TEKS AREA ANIMASI

TEKS AREA ANIMASI

12.57

By jangan

Teks area animasi

Ingin Punya TEKS AREA seperti dibawah ini langsung aja copy pastekan di Html/Javascript
Codenya

<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: #FFFF00 #FFFF00 #FFFF00 #FFFF00;
       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="1" cols="90">ISI DISINI TEKS / HTML</textarea>

Keterangan

rows="1" adalah tinggi

cols="90" adalah lebar