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

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

CSS3 text-shadow Property

Membuat blog menjadi lebih indah dan menarik adalah sebuah tantangan. Kode css menjadi pilihan utama sebagai sebuah solusi dan belajar tentang kode css adalah kuncinya, terlebih property css3. Ya..., fenomena baru dalam perkembangan desain blog selain html5 adalah css3. Baru beberapa tahun belakangan ini css3 mengalami perkembangan yang signifikan dan terhitung sangat pesat karena keseimbangan yang diberikan browser untuk memberikan dukungan penuh secepat mungkin. Salah satu property css3 yang sudah support di semua browser dan menggunakan kode seragam adalah text-shadow property. Text-shadow berfungsi menciptakan efek bayangan pada teks (shadow effects) yang mampu menyuguhkan tampilan teks lebih menarik dengan berbagai alternatif pilihan bentuk shadow melalui pengaturan nilai/value text-shadow property.

Posisi shadow

CSS3 Border Radius Property

CSS3 border radius property berfungsi untuk membentuk border dengan sisi lengkung (rounded corners). Pada saat ini semua browser telah support terhadap border-radius property, bahkan semuanya sudah menggunakan kode standart. Jika pada masa sebelumnya untuk membuat sudut lengkung harus menggunakan background image, dengan hadirnya css3 border-radius property maka untuk membentuk sudut lengkung hanya perlu menambahkan kode "border-radius" yang nilainya dalam bentuk pixel (px), em, pt atau % (persen). Untuk penggunaan secara umum lebih banyak dalam satuan px karena dengan nilai ini semua browser menghasilkan output yang seragam.