Blog Request tutorial? klik disini!

  • Menerapkan HSLa Dan RGBa Pada CSS

    1570 kali dibaca
    18 Dec / 2013 10:18

    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.






Baca juga

Rukan Artha Gading Niaga Blok i - 23, Jalan Boulevard Artha Gading

Kelapa Gading, Jakarta Utara 14240

(Belakang Mall Artha Gading)

Telp: (021) 4585-0387


Ruko Permata Regensi Blok B - 18, Jalan Haji Kelik

Srengseng, Kebon Jeruk, Jakarta Barat 11630

(Depan Hutan Kota Srengseng)

Telp: (021) 5890-8355


Ruko Jalan Taman Daan Mogot Raya No. 23

Kel. Tanjung Duren Utara Kec. Grogol Petamburan, Jakarta Barat 11470

(Belakang Mall Citraland dan Kampus UNTAR II)

Telp: (021) 2941-1188


Ruko Jalan Kartini Raya No. 53

Pancoran Mas, Depok 16436

(± 5 Menit dari Kantor Walikota Depok)

Telp: (021) 7720-7657


Rukan Crown Palace Blok A no 12, Jl Prof Dr Soepomo no 231 (Samping Universitas Sahid).

Kec. Tebet, Kel. Menteng Dalam.

(± 1 Menit dari Tugu Pancoran)

Jakarta Selatan 12870

Telp: (021) 2298-3886

Buka setiap hari Senin - Minggu jam 09.00 s/d 21.00

SMS: 0851-0055-5666 / 0819-7555-666 / 0812-9933-3913 / 0812-9393-3210 / 0812-1999-9155