Sabtu, 03 Juni 2017

Belajar Opacity RGBa & HSLa Pada css

        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 OpacityTransparansi 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
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>Belajar Opacity</title>
 <style>

  body{
  background-image: url(capture.jpg);
  }

  .satu{
   width: 300px;
   height: 300px;
   background-color: salmon;
   opacity: .5;
   position: relative;
  }

  .dua{
   width: 100px;
   height: 100px;
   background-color: blue;
   position: absolute;
   right: -50px;
   bottom: -50px;
   opacity: 1;
  }

 </style>
</head>
<body>

 <div class="satu">
  <div class="dua"></div>
 </div>

</html>

            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

Silahkan berkomentar yang baik dan menarik sesuai dengan isi konten.
Komentar yang tidak diperbolehkan :

1. Berbau penghinaan SARA & PXXN
2. Komentar dengan Link hidup ( akan dianggap spam )
3. Komentar tidak nyambung dengan isi postingan
EmoticonEmoticon