Kamis, 01 Juni 2017

Transparansi dan Property Opacity Pada css3

   Selamat datang kembali di Lupacode – Cara Mudah Belajar Ngoding, masih bersama saya selaku admin dari blog lupa code ini yang akan memberikan materi – materi pemrograman khusnya bagi kalian yang mempelajari css3, pada seri materi kali ini kita masih dalam seri CSS3 dimana kemarin kita sudah mulai membahas mengenai Border Radius pada css3. Bagi temen – temen yang ketinggalan materi yang kemarin silahkan temen – temen dapat langsung menuju halaman daftar isi atau sitemap pada blog ini untuk melihat artikel yang telah saya bahas sebelumnya


belajar mengenal Transparansi dan Property Opacity Pada css3


Property Opacity Pada css3 - Transparansi

  Pada materi ini kita akan membahas mengenai bagaiamana caranya memberikan sebuah transparansi kepada sebuah halaman html yang kita buat. Oke langsung saja kita masuk ke dalam pembahasan nya, temen – temen silahkan ikuti tutorialnya agar sama – sama kita bareng-bareng belajar bersama saya

  Baik disini misalkan saya mempunyai sebuah file html sederhana seperti ini, dimana didalam nya saya mempunyai sebuah div kosong dan saya mempunyai sebuah gambar untuk saya jadikan background image, sehingga syntax dari code saya seperti ini  
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>Belajar Opacity</title>
 <style>

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

  div{
   width: 300px;
   height: 300px;
   background-color: salmon;
  }

 </style>
</head>
<body>

 <div></div>

</html>

  Kalau kita lihat syntax dari code diatas adalah seperti ini

Belajar membuat opacity pada css3

              Sekarang yang ingin saya lakukan adalah bagaimana caranya membuat kotak di atas menjadi transparan. Karna kadang – kadang kita membuat sebuah elemen itu ingin memiliki sebuah transparansi tertentu. Sebelum ada css3 jika kita ingin membuat sebuah kotak transparansi itu bukan menggunakan property dari css, melainkan kita menggunakan photoshop untuk membuat sebuah gambar yang kita berikan opacity sesuai dengan keinginan kita, kemudian kita save gambarnya lalu kita panggil pada div body, dan itu pun harus memerlukan waktu yang sangat lumayan lama untuk membuat itu, atau memerlukan langkang yang panjang untuk membuat sebuah kotak trans[aransi didalam halaman html kita.

          Nah pada css3 itu ada sebuah property yang namanya Opacity jadi property ini digunakan untuk mengatur trasnparansi sebuah elemen, dan ini sangat mudah sekali untuk pemakaiannya dari pada kita harus pake image seperti pada css2 sebelumnya.

          Baik sekarang kita coba pakai untuk cara penggunaan property opacity tersebut. didalam syntax html saya diatas, pada bagian style didalam tag div maka saya hanya perlu menambahkan Opacity : kemudian kita kasih value nya, valuenya bisa kasih nilai dari 0 – 1  jika valuenya 0 itu akan membuat elemennya transparan sampai gak kelihatan. Sama saja seperty pada photoshop jika kita memberi opacity nya 0 maka akan sangat transparan sampai ga kelihatan. Kemudian jika valuenya 1 itu sama saja dengan opacity nya 100%

   Misalkan saya ingin membuat membuat transparan opacity nya 80% maka saya tinggal tulis Opacity : 0.8; seperti ini maka hasilnya kotak tersebut transparan sekitar 80%

Cara membuat opacity pada css3 belajar css

             Kalau misalkan kurang transparan kita kurangi lagi opacity nya misalkan Opacity : 0.5; maka akan semakin transparan dan begitu seterusnya. Oh iya kalau misalkan kalian memberikan nilai pada sebuah property di css itu 0.8 misalkan, itu 0 bisa saja kalian ga perlu tulis jadi kalau misalkan saya nulisnya .8 itu artinya sama dengan 0.8 atau 80% . jadi itu untuk penggunaan opacity untuk membuat elemen yang transparan jadi gampang banget yah penggunaanya

   Sekarang bagaimana kalau misalkan pada elemen div diatas saya tambahkan lagi sebuah elemen div didalamnya dan saya tambahkan class agar dapat berjalan keduanya jadi 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: 0.8;
  }

  .dua{
   width: 100px;
   height: 100px;
   background-color: blue;
  }

 </style>
</head>
<body>

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

</html>

  Sekarang kita lihat hasil dari syntax diatas adalah seperti ini

Cara membuat property opacity pada css3 denga mudah

     Sekarang kita lihat gambar diatas, kotak yang berwarna biru diatas yang akan omastis akan terkena transparansi sebesar 50% atau 0.5;  kenapa ? padahal saya ga kasih transparansi pada syntax diatas, karena dia mewakili transparansi dari elemen parrent nya. Tapi ada yang lain, misalnya begini
    Kita posisikan dulu elemen yang duanya (.dua) agar supaya overlaf terhadap elemn yang satu, contohnya begini

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

  Saya kasih position nya relative, dan elemen yang duanya seperti ini 

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

  Sekarang kita lihat hasilnya terlebih dahulu

Cara mudah belajar Opacity pada css3

  Sekarang kita lihat kotaknya sudah berada diluar, tapi lihat sekarang antara kotak yang dua dan kotak yang satu itu ga ada transparansi, kenapa ? karena mereka memiliki tingkat transparansi yang sama yaitu 0.5 kalau mau elemen yang kedua transparan terhadap elemen yang satu berarti kita harus kasih juga dia  opacity, jadi opacity didalam opacity, contohnya sekarang saya kasih opacity 0.5 juga misalnya,

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

  Sekarang kita lihat lagi hasilnya setelah kita beri dia opacity

Cara membuat elemen dengan Opacity menjadi sangat menarik

       Nah ini akan membuat elemen kotak yang biru itu lebih transparan lagi, karna yang itu saya kasih 0.5 tapi kalian mesti ingat, bahwa 0.5 yang kedua itu diambil dari 0.5 yang pertama, jadi kalau dilihat dari luar kotak biru itu memiliki tranparansi sekitar 0.25 karna diambil setengah dari kotak yang satu 0.5 sehingga membuat yang biru itu lebih transparan lagi. Semoga paham yah maksud saya 
      Sekarang yang terakhir, gimana kalau misalkan saya ingin kotak yang pertama yang besar itu tidak transparan jadi parrentnya ga transparan, tapi kotak kecil yang birunya transparan. Oke jadi kotak yang satu yang besar kita hilangkan Opacity nya, sedangkan kotak yang kedua yang kecil kita biarkan transparan, maka hasilnya adalah seperti ini

Belajar desain web design website dengan css3 menggunakan opacity

  Sekarang kotak yang kedua akan 0.5 terhadap kotak yang satu. Nah sekarang saya ingin kebalikannya kira-kira bisa ga ? kotak satunya yang besar transparan, sedangkan kotak biru yang kecil tidak transparan solid sama sekali. Jadi coba kita kasih opacity lagi pada kotak satu, kemudian kita kasih oapcity 100% jadi ga transparan. Sekarang coba lihat hasilnya ?

Belajar mengenai opacity dan property nya pada css3

       Ternyata ga bisa yah, kotak biru yang kecil tetap transparan terhadap background nya. Berarti kita ga bisa membuat sebuah elemen child itu solid atau ga transparan ketika elemen pembungkusnya transparan. Jadi kalau saya ingin bikin elemen yang kedua itu solid ga transparan sama sekali itu ga bisa kalau elemen pembungkusnya sudah transparan, jadi paham yah maksud pembahasan saya ini
  Jadi untuk cara mengatasinya kita tidak memakai opacity lagi, tetapi kita akan memakai satu property css3 yaitu RGBa & HSLa yang akan saya bahas pada materi selanjutnya, karna pada materi ini saya sudah kepanjangan nulisnya hehe

             Oke baiklah mungkin itu saja dulu untuk penggunaan property css3 Opacity pada pembahasan selanjutnya kita masih akan membahas materi pada seri css3 ini jadi untuk kalian yang tidak ingin ketinggalan materi baru dari web desain ini, silahkan temen – temen semua dapat berlangganan melalui email agar setiap saya memposting amteri baru akan langsung saya kirim via email.
          Jadi silahkan bagi temen - temen dipelajari lagi materi css3 mengenai property opacity ini, coba temen – temen sering-sering lah belajar membuat atau mengerjakan sesuatu belajar bereksperimenlah untuk menemukan suatu hal yang baru. Baiklah saya admin dari web desain undur diri, sampai berjumpa pada materi tutorial berikutnya

Terimakasih – Lupacode

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