Membuat Text Area Yang Keren

Advertisemen

Postingan saya sebelumnya pernah membahas tentang cara membuat text area, untuk pengertian text area sendiri, pasti sobat blogger sudah pada tahu, sedikit ulasan text area kurang lebih adalah kotak aktif yang dapat digunakan untuk menempatkan teks atau kode atau script, untuk memudahkan dalam melakukan copy-paste.
Nah kali ini saya akan membahas kemabali cara membuat text area dengan berbagai macam dan bentuk yang lebih menarik tentunya, mungkin sobat akan tertarik.

Gambar

di bawah ini ada beberapa macam text area yang usudah di edit :


<textarea name="code" rows="2" cols="50" style="background: #EFF5FB; color: #000; border: 1px solid #ccc; border-left: 20px solid #0174DF; line-height: 1.5em; padding: 5px; -moz-border-radius: 7px;"> ISI TEKS AREA SOBAT DISINI</textarea>


<textarea name="code" rows="3" cols="42" 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 name="code" rows="2" cols="40" style="background:#E0ECF8; color:#FF0000; border-bottom: 4px solid #FE2E2E; border-right: 4px solid #01DF01; border-top: 4px solid #01DF01; border-left: 4px solid #FE2E2E; line-height:1.5em; padding:5px; -moz-border-radius:10px;"> ISI TEXT/KODE </textarea>


<textarea name="code" rows="2" cols="42" style="background: #F8ECE0; color: #848484; 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="2" cols="42" style="background:#A9F5A9; color:#295F00; border:2px #295F00 dashed; line-height:1.5em; padding:5px;"> ISI TEKS AREA SOBAT DISINI </textarea>


<textarea name="code" rows="2" cols="42" style="background: #FAAC58; color: #FFEFF9; border: 3px dotted #FFEFF9; line-height: 1.5em; padding: 5px;"> ISI TEKS AREA SOBAT DISINI </textarea>


<textarea name="code" rows="2" cols="42" style="background:#AC58FA; color:#fff; border:3px double #ffaf; line-height:1.5em; padding:5px;"> ISI TEKS AREA SOBA DISINI </textarea>


Nah text area di atas merupakan sebagian yang telah di edit dari script aslinya, menarik bukan ?? silahkan edit menurut kesukaan sobat masing-masing.
Cukup sekian dari saya, semoga bermanfaat.

Advertisemen

 Tutorial Blog