Belajar Menggunakan Opacity RGBA dan HSLA Pada CSS3

Posted on
        Assalamualaikum Wr Wb. Selamat berjumpa kembali di blog lupacode – Tutorial pemrograman sahabat semua, gimana kabar kalian hari ini ? semoga kita selalu diberi
kesehatan serta keselamatan dan tetap dalam lindungan allah swt.
Masih bersama saya admin dari blog web desain ini dan pada materi kali ini kita masih dalam seri css3 dimana pada pembahasan materi kemarin kita telah membahas mengenai Opacity Transparansi pada css3 yang telah kita bahas pada materi sebelumnya. Silahkan bagi temen – temen yang baru bergabung atau baru masuk ke dalam pembahasan materi ini saya sarankan agar mempelajari materi – materi sebelumnya karna saya sudah bahas dari dasar pada seri css3 ini

Belajar Opacity – RGBa & HSLa

Belajar Opacity – RGBa & HSLa

         Pada kesempatan kali ini saya akan melanjutkan pembahasan yang kemarin yaitu mengenai Opacity Transparansi dimana pada akhir pembahasan kemarin kita mempunyai studi kasus yang akan saya pecahkan pada pembahasan materi kali ini. Pada materi
sebelumnya kita telah membahas mengenai opacity dimana bisa membuat sebuah
elemen itu transparan dengan menggunakan property opacity.
       Pada pembahasan materi yang kemarin kita telah membuat dua buah elemen sebagai contoh untuk opacity, dimana syntax nya adalah seperti ini

Kalau kita lihat hasil dari script diatas adalah seperti ini
RGBa & HSLa - web desain
     Nah didalam materi tersebut saya ingin membuat
elemen childnya atau elemen yang berada didalamnya itu engga transparan. Walaupun
kita sudah memberi nilai opacity nya 1 tapi tetap dia ga mau solid. Nah bagaimana
caranya ? saya ingin membuat kotak kecil biru itu solid atau tidak transparan,
sedangkan kotak yang besarnya transparan.
     Nah untuk melakukan itu kita tidak menggunakan
lagi opacity, jadi saya akan hapus dulu opacity nya, sehingga hasilnya akan
kembali menjadi solid seperti ini
RGBa & HSLa 1- web desain
      Sekarang kita buat kotak yang besar nya saja yang
transparan, nah itu caranya kita menggunakan sebuah property yang namanya RGBa ( Red Green Blue Alpha ) kalian
mungkin masih ingat, kalau misalkan kita memberi warna pada sebuah elemen kita
bisa pakai beberapa cara, bisa pakai nama warna, bisa pakai hexa decimal dan
bisa juga pake RGBa. Nah di css3 ada satu buah property yang
menambahkan satu buah channel atau satu buah parameter yaitu alpha atau artinya
adalah transparansi juga, jadi kita bisa ngasih warna beserta transparansi.
         Pertama kita butuh bantuan photoshop untuk
mengetahui kode warna atau RGBa yang kita butuhkan, misalkan pada kotak yang
besar diatas saya memberikan warna salmon, kalau kita lihat pada photoshop kode
RGBa nya adalah 255,153,102 seperti pada gambar dibawah ini
RGBa & HSLa 2- web desain
       Nah sekarang saya akan coba ganti hexa warna nya
menggunakan rgb seperti ini background-color: rgb(255,153,102);
Hasilnya sama seperti saya memberikan nama warna
pada sebelumnya yaitu salmon sampi sini paham yah.
      Nah sekarang kita bisa menambahkan satu buah
parameterlagi pada RGB tersebut jadi
seperti ini background-color: rgba(255,153,102); kita telah menambahkan
satu parameter yaitu a itu artinya transparansi nya. Jadi
kita tambahkan lagi koma setelah kode RGB tersebut yaitu untuk transparansi. Nilainya
sama persis seperti opacity yaitu nilai diantara 0 – 1 misalkan saya kasih nilai
transparansinya 0.6 seperti ini background-color: rgba(255,153,102,0.6); kita
lihat hasilnya sekarang
RGBa & HSLa 3- web desain
       Kita bisa lihat sekarang maka dia menjadi
transparan, jadi sekarang kita bisa bikin parrent nya transparan tapi elemen
didalamnya tidak transparan. Karna yang sekarang kita kasih transparan adalah
warna bukan elemen nya lagi paham yah, jadi RGBa ini untuk meberikan transparansi pada warna
sedangkan kalau Opacity itu digunakan untuk memberikan transparansi pada
element. Jadi dia ga peduli mau elemennya div atau gambar jadi semua itu akan
menjadi transparan. Tapi rgba hanya bisa beri kepada elemen yang kita kasih
warna jadi kalau untuk image jelas ga bisa yah, karna image ga punya background
color ga punya color seperti itu, bagaiman paham yah sampai sini.
    Selanjutnya ada lagi satu property css3 yang
fungsinya sama untuk memberikan warna dan transparansi, tapi menggunakan nilai
yang berbeda bukan RGB. Sekarang ada satu lagi property nya namanya HSLa
( Hue Saturation lightness Alpha )
nah ini juga sama untuk menentukan
warna. 
Kita butuh bantuan photoshop lagi untuk mengetahui
kode warna hsl yang akan kita pilih, contohnya adalah seperti ini
RGBa & HSLa 4- web desain
 
       Sekarang kalian bisa lihat pada gambar diatas, ada
H untuk hiu nya, S itu untuk saturasi dan L itu untuk lightness jadi
kalau misalkan saya ganti background-color:
rgba(255,153,102,0.6);
menjadi HSLa seperti contoh diatas, kita tinggal
hanti saha rgba nya menjadi hsla misalkan saya ganti rgb nya
menjadi hsla menjadi seperti ini
background-color: hsla(24,100%,63%,0.5);
        Maka hasilnya akan menjadi seperti ini
RGBa & HSLa 5- web desain
      Jadi seperti itu yah, kalian juga bisa menggunakan
Hsla untuk memberikan transparansi
warna.
      Baiklah mungkin itu saja untuk pembahasan materi
kali ini, dan kita telah membahas alpha pada warna kemudian kita telah membahas
satu property HSLa untuk memberikan warna dengan cara yang berbeda
        Oke mungkin sampai sini dulu untuk pembahasan
materi kali ini, silahkan temen – temen pelajari lagi dan sering – seringlah belajar
di agar lebih terbiasa lagi dalam menggunakan property – property yang kita
butuhkan. Sampai bertemu lagi pada pembahasan materi selanjutnya yaitu masih
dalam seri css3 jadi pastikan terus kalian tidak ketinggalan materi – materi yang
saya bahas dalam web desain ini.
Baiklah saya admin dari Web Lupacode undur diri. Terimakasih
Wassalamualaikum Wr. Wb

One thought on “Belajar Menggunakan Opacity RGBA dan HSLA Pada CSS3

Leave a Reply

Your email address will not be published. Required fields are marked *