Attibute Align

Attribute align adalah attribute dalam kode html yang fungsinya berkaitan dengan pengaturan perataan teks dan pengaturan posisi image. Untuk perataan teks, attribute align dapat digunakan pada semua blok elemen html yang bermuatan teks. Anda bisa menggunakan attribute ini pada tag DIV, tag p dan elemen heading (h1 s/d h6).

Attribute align pada teks

• align="right" » Membuat teks rata kanan.
• align="left" » Membuat teks rata kiri.
• align="justify" » Membuat teks rata kanan-kiri.
• align="center" » Membuat teks rata tengah.

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

Highlight All, Select All in Textarea

Banyak hal bisa dilakukan melalui textarea, seperti misalnya untuk link exchange atau tukar link. Textarea bisa juga digunakan untuk posting kode html, kode css atau javascript. Agar pembaca/pengunjung blog dapat dengan mudah mengcopy seluruh konten yang tersimpan dalam textarea anda dapat menambahkan fungsi highlight all/select all. Javascript yang sangat sederhana dapat ditambahkan untuk menciptakan fungsi tersebut. Javascript dapat disimpan terpisah, namun dapat juga dibuat terpadu dalam html textarea.

Highlight All/Select All tanpa "button select"

Tag Style, CSS Specific for IE (Internet Explorer)

Membicarakan tentang kode kode html dan Internet Explorer (IE) kadang terasa menyedihkan dan bahkan bikin stress atau sesekali emosi menyeruak. Yah...., bagaimana tidak...?! Setelah semua browser yang lain oke-oke saja tetapi ketika kita coba di IE ... e.... ternyata apa yang kita buat tak berfungsi sebagaimana yang diharapkan. Membuat kode yang dikhususkan bagi IE terpaksa harus dilakukan. Salah satu yang paling sering dibutuhkan adalah membuat kode css dalam tag style yang dikhususkan untuk IE.

Tag style - kode css khusus IE

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.

Width Property

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

CSS width property lebih banyak menggunakan satuan px, namun demikian sebenarnya masih ada beberapa satuan lain yang dapat digunakan pada deklarasi width.

Value/nilai yang digunakan pada CSS width property

• inherit » Lebar elemen akan sesuai/sama besar dengan width elemen/box yang ditempatinya.
• auto » Perhitungan width dilakukan browser.
• px » satuan pixels (px) paling banyak digunakan pada desain blog/web.
• em » 1em ekuvalen dengan 16px
• cm... dll »

Opacity Property

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

Opacity effect atau efek transparansi (sering juga disebut blur efect) diciptakan melalui opacity property. Penyebutan sebagai efek transparansi atau blur effect disebabkan transparansi yang tercipta ketika opacity property digunakan. Anda bisa menggunakan efek opacity pada box, image atau obyek lain seperti teks. Meskipun opacity effect dapat digunakan tanpa melibatkan hover effect, namun pada kenyataannya lebih banyak desain blog/web yang menggabungkan fungsi css opacity property dan hover effect secara bersamaan. Dalam perkembangan terakhir, setelah css3 mendapat dukungan penuh dari beberapa browser besar, bahkan efek transparansi (transparency effect) ini bisa dibuat lebih atraktif dengan menambahkan css3 transition property, css3 animation property dan css3 transform property. Yang sangat perlu diperhatikan ketika menggunakan opacity property adalah "penggunaan kode (deklarasi css) yang berbeda untuk Internet Explorer (IE).

Adding class to set the position of image post

Menjadi seorang blogger yang sekaligus juga mengetahui bagaimana desain blog dibuat berikut kode yang digunakan menjadi sesuatu yang sangat menarik. Menjadi blogger memang "tak hanya sekedar bernilai sebuah posting", namun masih banyak hal lain yang juga sangat menantang dan seringkali bahkan membuat lebih banyak waktu tersita. Salah satunya adalah mencoba membuat berbagai kode baru dengan tujuan menciptakan posting dengan kode lebih sederhana namun mempunyai kualitas dan tampilan lebih baik. Image posting merupakan salah satu diantaranya dan melakukan itu dapat dilakukan dengan memanfaatkan property css. Tentu saja memahami kode css menjadi kunci segalanya dan itu hanya bisa terjadi dengan lebih banyak belajar css melalui tutorial css yang banyak tersedia di berbagai blog/web atau dari berbagai buku tentang css & kode html.