Belajar Transparansi dan Property Opacity Pada css3

Posted on
   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
 

 

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

 

  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,

  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

One thought on “Belajar Transparansi dan Property Opacity Pada css3

Leave a Reply

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