Dahulu kala..., ketika css3 belum lagi ada...., textarea harus diterima apa adanya dengan tampilan ala kadarnya. Jauh dari menarik karena tak banyak yang dapat dilakukan untuk membuatnya terlihat lebih cantik. Tetapi kini anda bisa saja tertipu oleh bentuk dan tampilannya. Dia bisa didandani menjadi sebuah box bagi teks yang sangat elegan dengan rupa bisa dirubah sesuai selera pengguna. Satu yang sangat penting untuk tetap membuatnya terlihat sebagai textarea adalah tetap menampilkan "tanda resize" diujung kanan bawah box sebagai sebuah ciri khusus textarea. Tanda khusus ini bisa diganti dengan sebuah icon kecil dengan bentuk serupa agar berbagai kode css baru bisa dimanfaatkan secara maksimal guna memperindah textarea. Kode CSS, khususnya css3 menjadi rahasia sekaligus kunci bagi perubahan tampilan textarea.
Textarea css3-1
Textarea ini menggunkan batasan minimal height, maksimal height, minimal width dan maksimal width sehingga ketika diperbesar atau diperkecil mempunyai batasan ukuran tertentu.<style type="text/css"> textarea.sarju{ margin:15px 0; padding:5px 5px 5px 10px; box-shadow:0 0 8px #fff; color:#d6f9fb; text-shadow:2px 2px 2px #888; background:#023f4c url(https://lh6.googleusercontent.com/-vOGp2XAF7rE/UES28zMSUlI/AAAAAAAAAWA/aiG9L27tSH8/s128/mini-dragger-resize.png) 98.5% 94% no-repeat; padding:5px 5px 5px 12px; border:4px outset #47dafa; border-radius:8px; min-height:60px; max-height:200px; min-width:200px; max-width:400px; } </style> <textarea class="sarju" cols="50" rows="6" readonly> Select All and copy dimaksudkan untuk lebih memudahkan dan mempercepat proses copy paste pada teks yang terwadahi dalam sebuah textarea. Pembaca tinggal melakukan KLIK pada "button select all" atau "highlight all" dilanjutkan COPY, maka semua materi posting akan tercopy keseluruhannya. Untuk menciptakan fungsi seperti ini dibutuhkan bantuan javascript sederhana dan button selector. </textarea><br/> </style>
Textarea CSS3-2
Menambahkan textshadow, box-shadow serta border-radius dan beberapa property css yang lain.<style type="text/css">
.xx{
background:#749dea url(https://lh6.googleusercontent.com/-vOGp2XAF7rE/UES28zMSUlI/AAAAAAAAAWA/aiG9L27tSH8/s128/mini-dragger-resize.png) 98.5% 93% no-repeat;
box-shadow:-1px -1px 0 #222, 3px 3px 3px #222;
font:normal 14px Courier;
padding:10px 5px 10px 15px;
color:#fff;
border-radius:8px;
text-shadow:1px 1px 0px #000;
}
</style>
<textarea class="xx" readonly cols="50" rows="6">
Select All and copy dimaksudkan untuk lebih memudahkan dan mempercepat proses copy paste pada teks yang terwadahi dalam sebuah textarea. Pembaca tinggal melakukan KLIK pada "button select all" atau "highlight all" dilanjutkan COPY, maka semua materi posting akan tercopy keseluruhannya. Untuk menciptakan fungsi seperti ini dibutuhkan bantuan javascript sederhana dan button selector.
</textarea><br/>Textarea CSS3-3
Mengganti rows dan cols dengan width dan height serta menambahkan min-height, max-height, min-width, max-width serta beberap property lain. Property display "block" membuat tag <br /> tak perlu ditambahkan di bawahnya. Textarea juga dilengkapi dengan script "highlight all" untuk memudah copy paste konten di dalamnya.<style type="text/css"> textarea.megal{ display:block; width:400px; height:125px; min-height:6px; min-width:300px; max-height:250px; max-width:450px; padding:10px 5px 10px 15px; margin:20px 0 10px; border:1px solid #fff; background:#ccc url(https://lh6.googleusercontent.com/-vOGp2XAF7rE/UES28zMSUlI/AAAAAAAAAWA/aiG9L27tSH8/s128/mini-dragger-resize.png) 98% 95% no-repeat; border-radius:15px 25px 5px 25px; font:normal 14px Arial; color:#802202; text-shadow:4px 4px 6px #666; line-height:18px; box-shadow:0px 0px 8px #222; } </style> <textarea class="megal" onclick="this.focus();this.select()" readonly> Select All and copy dimaksudkan untuk lebih memudahkan dan mempercepat proses copy paste pada teks yang terwadahi dalam sebuah textarea. Pembaca tinggal melakukan KLIK pada "button select all" atau "highlight all" dilanjutkan COPY, maka semua materi posting akan tercopy keseluruhannya. Untuk menciptakan fungsi seperti ini dibutuhkan bantuan javascript sederhana dan button selector. </textarea>
Textarea CSS3-4
Menambahkan textshadow, box-shadow serta border-radius dan beberapa property css yang lain.<style type="text/css"> textarea.megol{ display:block; padding:10px 5px 10px 10px; margin:20px 0 10px; border:10px solid #fff; background:#999 url(https://lh6.googleusercontent.com/-vOGp2XAF7rE/UES28zMSUlI/AAAAAAAAAWA/aiG9L27tSH8/s128/mini-dragger-resize.png) 98% 95% no-repeat; border-radius:20px; font:normal 14px Arial; color:#fff; text-shadow:1px 1px 1px #000; line-height:18px; box-shadow:-1px -1px 1px #555, 3px 3px 3px #222; } </style> <textarea class="megol" rows="8" cols="56" readonly> Select All and copy dimaksudkan untuk lebih memudahkan dan mempercepat proses copy paste pada teks yang terwadahi dalam sebuah textarea. Pembaca tinggal melakukan KLIK pada "button select all" atau "highlight all" dilanjutkan COPY, maka semua materi posting akan tercopy keseluruhannya. Untuk menciptakan fungsi seperti ini dibutuhkan bantuan javascript sederhana dan button selector. </textarea>
Di bawah ini telah disertakan beberapa model textarea yang dibuat dengan beberapa property css dan css3. Lakukan editing dan dapatkan berbagai model yang berbeda.
Please click the button to display. Continue with editing code and click to see the results!
Tidak ada komentar:
Posting Komentar