CSS3 : rgba (warna dan transparansi)

545

Belajar CSS3-nya berlanjut, sekarang giliran format warna rgba yang unik. Unik karena kita bisa mengatur tingkat transparansi dari warna tersebut. RGBA gabungan antara warna rgb ditambah alpha yang berupa tingkat transparansi dari warna rgb tadi.

RGB adalah format warna yang paling umum digunakan dalam dunia digital. Semua warna yang kita lihat dilayar monitor semuanya merupakan kombinasi dari warna merah, hijau dan biru. Nilai setiap elemen RGB tersebut berkisar antara 0 sampai 255. Dengan rgba dalam CSS3 ini, kita tidak perlu lagi menggunakan format warna heksadesimal yang sudah ngetop duluan di dunia web design.

Bagi saya pribadi ini tidak terlalu menarik karena toh kedua – duanya format warna juga, tapi setidaknya makin banyak opsi yang bisa kita gunakan. Nah yang paling menarik bagi saya dalam rgba ini adalah adanya alpha untuk tingkat transparansi dari warna rgb yang kita pilih. Nilai yang digunakan antara 0 sampai 1. Jika 0 yang digunakan berarti 100% transparan alias tidak kelihatan. Sebaliknya jika 1 berarti tingkat transparannya nol jadi warna kelihatan dengan jelas. rgba ini bisa digunakan untuk semua properti CSS yang bisa diwarnai, seperti text, background dan border. Untuk penulisan bisa dilihat di gambar, saya gunakan rgba ini untuk mewarnai text dari heading.

css3 rgba transparency

Untuk contoh riilnya silahkan copast HTML sederhana berikut,

Kemudian lihat hasilnya di browser terbaru (saya gunakan firefox 3.6).

css3 rgba opacity transparency

SHARE
Previous articleCSS3 : text shadow
Next articleMembuat Form Search (CSS3 + Icon )
Seorang desainer sekaligus blogger dengan hobi tidur siang. Hanya belajar, belajar dan belajar.... Seperti kata naruto "Tak ada jalan pintas untuk menjadi seorang Hokage".