Pengertian kode warna RGBA, HSL, HSLA, dan Atribut selector di CSS

Pengertian dan penulisan kode warna RGBA, HSL, DAN HSLA

Pengertian kode warna RGBA

Jika kode warna RGB merupakan singkatan dari Red, green, blue, maka kode warna RGBA adalah singkatan dari Red,Green,Blue,Alpha.

Tambahan kata alpha disini merujuk kepada alpha channel.

Alpha channel adalah sebuah metode untuk menentukan tingkat transparan sebuah warna(opacity).

Nilai alpha 0 akan membuat sebuah warna transparan (tembus pandang), dan nilai alpha 1 akan membuat warna solid dan tidak tembus pandang terhadap objek lain dibelakang nya(ini merupakan nilai default).

Namun kita bisa membuat nilai berada di antara 0 dan1, dengan penulisan desimal seperti 0.5, 0.6, 0.9.

Dengan demikian kita bisa membuat efek tembus pandang dengan CSS, terutama untuk beberapa objek yang saling bertumpuk.

Untuk penulisan kode warna RGBA dalam CSS, kita menggunakan notasi penulisan desimal, dan menambah keyword "rgba" diawali penulisan nilai.

Berikut adalah contoh kode CSS dan HTML yang akan menjadi bahan kita:

Dan hasil kode di atas adalah seperti ini.

HSL

Warna dari HSL merupakan kordinat silinder untuk nantinya menentukan sebuah warna.

Nanti kode awalnya memakai variable hue, saturation ,dan lightness.

Hue adalah nilai dari sudut pandang nya dari vertikal dan saturation yaitu nilai jarak horizontal dan sumbu, dan lightness adalah tinggi nya.

Kode HSL pada umumnya banyak digunakan pada software yang untuk membuat fitur color pixel.

Nah, nantinya pada CSS penulisan kode HSL nanti di awali dengan karakter HSL, Contohnya.

Dan hasil dari kode di atas.

HSLA

Sedikit memiliki kemiripan dari model RGB yang,HSL dapat dibuat menjadi HSLA dengan menambahkan nilai alpha channel.

Nantinya penulisan CSS menggunakan awal karakter "hsla".

Maka hasil kode di atas adalah seperti ini

Pengertian atribut selector dalam CSS

Pengertian atribut selector dalam CSS

Atribut selector adalah selector CSS yang digunakan untuk mencari elemen HTML dengan menggunakan nilai atribut dari tag HTML.

Untuk menggunakan atribut selector kita harus menulisnya di dalam tanda kurung siku, seperti contoh berikut ini:[href].

Aturan penulisan atribut selector pertama kita adalah: [attr].Attr disini dapat diganti dengan atribut HTML yang ingin dicari.

Karena biasanya atribut href digunakan di dalam tag a, maka atribut selector ini umumnya ditulis menjadi.

Penulisan atribut selector [attr=value] berarti kita mengikutsertakan nilai dari atribut tersebut ke dalam selector.

Sebagai contoh jika anda membuat halaman HTML yang memiliki banyak gambar dengan berbagai ukuran, maka untuk menyeleksikan tag img yang memiliki atribut width="200px", kita bisa membuat nya dengan cara.

Dengan menambahkan nilai 200px,maka selector di atas tidak akan mengubah border tag img lain yang memiliki atribut width selain 200px.

Atribut selector dengan penulisan [attr^=value], berarti selector tersebut akan mencari seluruh tag HTML yang nilai atribut nya di awali dengan nilai "value"(perhatikan penggunaan tanda pangkat (^) pada karakter terakhir attr).

Misal jika kita ingin mengubah seluruh warna tag a yang menggunakan alamat absolut, bisa menggunakan kode CSS berikut ini.

Atribut selector dengan penulisan [attr$=value] berarti selector tersebut akan mencari seluruh tag HTML yang nilai atribut nya di akhiri dengan nilai "value"(Perhatikan penggunaan tanda dollar($) pada karakter terakhir"attr".

Sebagai contoh misalkan kita ingin mengubah warna link yang menuju file pdf pada atribut href.berikut adalah kode CSS yang akan bisa digunakan.

Cara penggunaan atribut selector

Sebagai tutorial penggunaan atribut selector, berikut adalah kode HTML+CSS untuk semua atribut selector yang telah kita pelajari.

Hasil dari kode di atas.