Menerapkan HSLa dan RGBa Pada CSS

RGBa dan HSL ( "a " untuk " alpha " , seperti dalam "alpha transparency" ) dapat diterapkan untuk setiap properti yang memiliki nilai warna , seperti color , background-color, border-color atau box-shadow dan lainnya .

Alpha Transparency

RGBa membuka dimensi baru yang menarik untuk desain web , memungkinkan Anda untuk mengatur transparansi dari kotak atau teks . Jika Anda text nya menjadi transparan, maka anda dapat melakukannya seperti ini :

Nilai standar dari rgb( 0,0,0 ) akan membuat warna h1 murni hitam tapi dengan menambahkan  nilai keempat  di RGBA akan memberikan efek tingkat transparansi  dari  " 1 " yang benar-benar kelihatan , " 0 " yang benar-benar transparan . Jadi RGBA ( 0,0,0,0.5 ) artinya red = " 0 " , hijau = " 0 " , biru = " 0 " , alpha = " 0.5 " , dimana “0.5” membuat 50 % hitam.

Tentu saja ini tidak hanya berlaku untuk teks, Anda bisa menerapkan warna latar belakang transparan untuk seluruh kotak , kotak bayangan transparan ... di mana saja di mana Anda dapat menggunakan rgb , Anda dapat menggunakan rgba.

Hue, saturation , and lightness

Warna web yang kita ketahui selalu red, green dan blue, bisa melalui kode hex  # atau rgb / rgba. Meskipun kesannya tidak to the point ( terutama ketika otak Anda dilatih untuk memecah warna menjadi red, green dan blue) , HSL sebenarnya dapat lebih intuitif karena memberi Anda kontrol langsung terhadap aspek sebuah warna.

HSL digunakan dalam cara yang mirip dengan rgb :

Penjelasannya adalah :

Hue ( " 36 " dalam contoh di atas ) : Setiap sudut , dari 0 hingga 360, yang diambil dari roda warna yang khas , di mana " 0 " ( dan " 360 " ) red, " 120 " adalah green dan " 240 " adalah blue.

Saturation ( " 100 % " dalam contoh ) : Bagaimana jenuh Anda ingin warna yang akan , dari 0 % ( grey ) untuk 100 % ( full tidak ada elemen abu-abu).

Lightness ( " 50 % " dalam contoh ) : Dari 0 % ( hitam ) sampai 100 % ( putih) , 50 % menjadi " normal".

Jadi contoh yang digunakan di sini akan menghasilkan warna orange( 36 ° ) yang kaya ( 100 % full ) dan saturation ( 50 % normal ) . Ini adalah setara dengan # ff9900 , # f90 , dan rgb ( 255 , 153 , 0 ).

HSLa

Kalau begitu, apakah transparansi bisa di terapkan di HSL? Silahkan di coba.

HSL dan HSLA didukung oleh sebagian besar browser baru , termasuk versi IE 9 dan di atas .

Silahkan mencoba.