Variasi Warna Background Text Area

Setelah saya menulis artikel Membuat Text Area Sederhana. Kembali ide saya untuk membuat text area dengan bermacam variasi bentuk dan warnanya serta backgroundnya. Tujuan text area ini yaitu sebagai tempat meletakkan kode html atau kode lainnya seperti banner friends. Silakan anda pilih salah satu text area di bawah ini sesuai dengan selera anda .

Silakan Copy dan Paste kode di bawah ini :

<textarea name="code" rows="3" cols="20" style="background:#BFFAFF; color:#FF0000; border-bottom: 4px solid #40FF1F; border-right: 4px solid #40FF1F; border-top: 4px solid #FFE900; border-left: 4px solid #FFE900; line-height:1.5em; padding:5px; -moz-border-radius:10px;"> ISI TEXT/KODE </textarea> <textarea name="code" rows="3" cols="20" style="background: #FFDAAF; color: #7F4500; border: 2px ridge #7F4500; line-height: 1.5em; padding: 5px; -moz-border-radius-topleft: 15px; -moz-border-radius-bottomright: 15px;"> ISI TEKS AREA SOBAT DISINI </textarea>

<textarea name="code" rows="3" cols="20" style="background:#FF000A; color:#fff; border:3px double #ffaf; line-height:1.5em; padding:5px;"><br />ISI TEKS AREA SOBA DISINI </textarea> <textarea name="code" rows="3" cols="20" style="background: #EF0090; color: #FFEFF9; border: 3px dotted #FFEFF9; line-height: 1.5em; padding: 5px;"> ISI TEKS/KODE </textarea>

<textarea name="code" rows="3" cols="20" style="background: #FBEFFF; color: #CA3DD9; border: 1px solid #CA3DD9; border-left: 20px solid #CA3DD9; line-height: 1.5em; padding: 5px; -moz-border-radius: 7px;"> ISI TEKS AREA SOBAT DISINI</textarea> <textarea name="code" rows="3" cols="20" style="background:#DAFFBF; color:#295F00; border:2px #295F00 dashed; line-height:1.5em; padding:5px;"> ISI TEKS AREA SOBAT DISINI </textarea>

<textarea name="code" rows="3" cols="20" style="background: #000; color: #fff; border: 2px inset #ccc; line-height: 1.5em; padding: 0 7px; -moz-border-radius: 5px;">ISI TEKS AREA SOBAT DISINI</textarea> <textarea cols="20" name="Bptxt" rows="3" style="-moz-background-clip: border; -moz-background-inline-policy: continuous; -moz-background-origin: padding; -moz-border-radius-bottomleft: 15px; -moz-border-radius-bottomright: 15px; -moz-border-radius-topleft: 15px; -moz-border-radius-topright: 15px; -moz-box-shadow: 5px 0px 8px rgb(129, 129, 129); background: white none repeat scroll 0% 0%; border-left: 20px solid red; color: black; line-height: 150%; padding: 5px;">simpan tulisan anda di sini</textarea>

<textarea name="Bptxt" rows="3" cols="20" style="background:yellow; color:black;border-left: 20px solid red; line-height: 1.5em; padding: 5px;-webkit-box-shadow: 5px 5px 8px #818181;<br />-moz-border-radius-topleft: 15px; -moz-border-radius-bottomright: 15px; ">Tulis text ataupun kode-kode yang anda ingin tampilkan di sini</textarea> <textarea cols="20" name="Bptxt" rows="3" style="-moz-background-inline-policy: continuous; -moz-border-radius: 15px 15px 15px 15px; -moz-box-shadow: 5px 0px 8px rgb(129, 129, 129); background: none repeat scroll 0% 0% Pink; border-left: 20px solid red; color: black; line-height: 150%; padding: 5px;">simpan tulisan anda di sini</textarea><br />


Untuk Text Area Background bergambar, Copas kode di bawah ini :

<div style="overflow: auto; width: 250px; height: 100px; background-color: rgb(255, 236, 255); background-attachment: scroll; background-repeat: no-repeat; background-position: right bottom; background-image: url(&quot;http://bootingskoblog.files.wordpress.com/2008/11/poke133.gif&quot;); text-align: justify; padding: 5px; border: 2px solid rgb(0, 0, 185); color: rgb(242, 10, 29);">tulis postinganmu disini</div>

<div style="overflow: auto; width: 400px; height: 200px; background-color: rgb(255, 236, 255); background-attachment: scroll; background-repeat: no-repeat; background-position: center bottom; background-image: url(&quot;http://i285.photobucket.com/albums/ll64/krabbelmaar/Glitters/Cartoons/i118737845_6615.gif&quot;); text-align: justify; padding: 5px; border: 2px solid rgb(0, 0, 185); color: rgb(242, 10, 29);">Tulis Postinganmu disini</div>

^Selamat Mencoba^