Adding css3 transition on textarea

Untuk sementara ini, menambahkan css3 transition pada textarea akan beerfungsi secara optimal hanya ketika dibuka melalui Mozilla Firefox, Google Chrome dan Safari. Efek transisi  pada "resize" sungguh memberi sentuhan luarbiasa sekalipun sayangnya belum dapat dinikmati di Opera dan IE. Jika anda menggunakan Opera atau IE sekalipun "efek resize" tak mungkin terlihat, namun demikian tentu saja masih ada efek lain yang dapat dinikmati seperti pada transisi background dan warna teks. Menggunakan Mozilla, Google Chrome dan Safari tentu saja lebih disarankan agar semua efek baru textarea dapat dinikmati (install dengan yang terbaru!). Selain menggunakan kode css3 (transition property), beberapa kode css (css property) juga ditambahkan agar css3 transition berfungsi seperti yang diharapkan.

CSS3 Transition Property

Create textarea with background image

Membuat textarea dengan sebuah background image dapat dilakukan dengan 2 macam cara berdasarkan 2 pertimbangan. Kedua cara mengahruskan kita untuk menggunakan tag style dengan beberapa kode css (css property). Cara pertama dilakukan dengan menambahkan background image secara langsung pada elemen textarea. Cara ini cukup simple karena hanya perlu menambahkan "attribute class" pada tag textarea. Sayangnya, cara seperti ini membuat "icon resize" yang biasanya terlihat diujung kanan bawah box dan menjadi ciri khas textarea ketika dibuka di Mozzila, Goggle Chrome dan Safari menjadi hilang (tak terlihat). Cara yang kedua adalah dengan cara menambahkan tag div untuk membungkus tag textarea. Tag div inilah yang nantinya diberi background image sebagai latar belakang, sementara pada textarea ditambahkan background rgba dan icon resize agar textarea tetap terlihat sebagaimana mestinya.

Membuat background image pada textarea dg kode css sederhana

Creating beautiful textarea with CSS3

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

HTML textarea tag

Belajar CSS, tutorial css, javascript, demo online, html editor online, html, xHTML, tutorial desain blog, tutorial css3

Textarea merupakan sebuah elemen yang secara khusus berfungsi sebagai area bagi teks. Dikatakan demikian karena elemen ini hanya menampilkan teks dan tidak bagi yang lain. Semua teks ditampilkan seperti apa yang tertulis, sehingga ketika anda bermaksud menampilkan sebuah image dalam bentuk kode HTML di textarea, maka yang akan terlihat bukanlah image yang diinginkan, melainkan kode HTML seperti yang dituliskan. Sebagai contoh anda bisa melihatnya di bawah ini:

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIy8YCRcFO_z5t4Infs6zDAhdDyTZASiBLZGKR_rfxdP7Fi-cdXoJcBI5hcKYJhzkjMS_F7xKNk-tN-T75ujfcNDeMlLOHUmRoYGHrHoleJhhx9c14qG078bQT6tW8m2vcHFmVfe8-NxM/s400/gambar-harimau-02-400x300.jpg" width="400" height="300" alt="Singa Jantan" />

Textarea ditampilkan sebagai sebuah box dengan tinggi dan lebar yang dapat diatur melalui attribute rows (tinggi/height) dan cols (lebar/width) dengan nilai dalam bentuk angka.