CSS line-height Property

Berfungsi untuk mengatur jarak antar baris teks. Nilai yang digunakan berupa angka (ekuivalen dengan satuan em), dalam satuan px, pt, em, cm, etc (length) dan % (persen). Nilai line-height dalam persen ditentukan berdasarkan ukuran font. Dalam property line-height tidak berlaku nilai negatif. Jika ingin membuat setiap baris lebih rapat atau hingga baris teks bertumpuk gunakan nilai yang semakin kecil.

Deklarasi line-height property

CSS text-transform Property

CSS text transform property berfungsi untuk merubah format teks secara otomatis melalui kode CSS. Ada 4 pilihan nilai yang bisa digunakan.

• Value » capitalize | uppercase | lowercase | none
• Initial » none
• Applies to » all elements
• Inherited » yes
• Percentage values » N/A

CSS Border Spacing Property

CSS border-spacing property digunakan pada elemen table dan berfungsi untuk mengatur jarak antara bagian elemen table (cell) dengan border table. Penggunaan spacing property hanya bisa digunakan untuk deklarasi border-collapse:separate; dan tidak untuk nilai yang lain (contoh:collapse).

Declaration

CSS word-spacing Property - Mengatur spasi/jarak kata

Jika untuk mengatur jarak/spasi antar karakter dal;am kata/teks/kalimat digunakan css letter-spacing property, maka untuk pengaturan jarak/spasi antar kata/teks dalam kalimat digunakan CSS word-spacing property. Word spacing property dapat bernilai positif atau negatif. Negatif untuk memperpendek jarak setiap kata, dimana semakin besar nilainya semakin rapat, sedang untuk memperlebar jarak setiap kata menggunakan nilai positif (semakin besar semakin lebar jarak tiap kata).

Fungsi dan Kegunaan CSS word-spacing-property

CSS letter-spacing Property

Letter spacing property berfungsi untuk mengatur spasi antar karakter. Ini mungkin akan sangat bermanfaat bagi anda ketika menggunakan teks/font berukuran besar (heading) seperti yang digunakan untuk blog title (nama blog), post title (judul posting) dan teks posting lain yang berukuran cukup besar. Membuatnya dalam nilai negative akan membuat teks menjadi lebih rapat sehingga teks dapat diperpendek dan ini sangat penting untuk mensiasati lebar kolom/ruang yang tersedia.

Fungsi dan Penggunaan

CSS vertical-align Property

Salah satu property dalam kode css adalah vertical-align. Mungkin kode css ini masih terasa asing bagi beberapa blogger karena memang sangat jarang digunakan. CSS vertical-align property berlaku pada elemen image dan digunakan bersama teks. Property vertical-align berfungsi mengatur penempatan teks secara vertical di sebelah kanan dan/atau kiri sebuah image. Ada beberapa posisi penempatan teks yang bisa dipergunakan dan pengaturannya dilakukan melalui beberapa nilai/value yang sudah ditentukan. Selain pada elemen image, vertical-align property juga bisa dipergunakan pada elemen table-cell.

Value/nilai dan deklarasi css vertical-align property

CSS text-align Property - Perataan Teks dg kode css

Blog/web sangat identik dengan posting, sedang posting sendiri adalah sebuah aktifitas blogger untuk membuat artikel/tulisan hingga diterbitkan. Mengetahui tentang perataan teks melalui fungsi kode css sangatlah penting sehingga posting yang rapi dapat tercipta. Diluar hal tersebut, mengetahui fungsi dan cara menggunakan kode css perataan teks (text-align property) akan meng-efektifkan penggunaan kode html selama posting.

Value text-align property:

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.