CSS 3 : Opacity

Kita akan bahas mengenai bagaimana memberikan transparansi pada sebuah elemen HTML yang kita buat.

Perhatikan HTML sederhana dibawah ini

 

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>CSS 3 Opacity</title>
   <style>
      div {
         width: 300px;
         height: 300px;
         background-color: blue;
      }
</style>
</head>
<body>
   <div></div>

</body>
</html>

 

Sekarang yang ingin saya lakukan adalah gimana caranya supaya kotak yang saya buat seperti script diatas itu transparan, kadang kadang kita bikin sebuah elemen itu memiliki tingkat transparan tertentu atau berbeda beda, dulu sebelum ada CSS 3 membuat sebuah elemen yang transparan itu sangat ribet sekali, kita tentunya membutuhkan software grafis untuk membuat elemen transparat lalu di terapkan di halaman web kita, nah dengan CSS 3 ini nantinya dengan mengetikkan sebuah 1 baris saja kita sudah bisa membuat elemen menjadi transparan, tuh SAKTI memang CSS 3 nihh.

 

Di CSS 3 itu ada sebuah property yang namanya opacity, jadi property ini digunakan untuk mengatur transparan sebuah element . ini gampang banget makainya, daripada kita harus makai image dari software grafis, kita coba pakai property tersebut, kembali seperti html dan css seperti diatas, saya sudah membuat silahkan di catet atau di copy paste ditext editor kalian, intinya di script tersebut adalah ada kotak yang ukurannya 300px yang mempunyai warna biru, dan sekarang saya ingin kotak tersebut menjadi transparan dengan bantuan CSS 3 , propertynya di style seperti dibawah ini.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS 3 Opacity</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            background-color: blue;
            opacity: 0.8;
       }
    </style>
</head>
<body>
    <div></div>

</body>
</html>

 

Dan kalau kita lihat dibrowser maka kotak yang awalnya warna biru solid, sekarang sudah ada transparan nya, tapi sekarang ini hanya sebuah 1 baris property CSS 3 saja, jadi gampang banget, kalau misalnya kurang transparan ya dikurangi saja contoh opacity : 0.5; atau 50% .

 

Oiya ini ada juga, kalau misalkan kalian memberikan sebuah nilai pada sebuah property di CSS itu 0, boleh saja 0 nya tidak ditulus misal .25 itu sama saja, kalau saya nulis .8 itu sama saja saya nulis 0.8, itu untuk penggunaan opacity gampang banget untuk membuat elementnya transparan.

 

Sekarang kita lihat gimana kalau didalam element yang ada diatas itu didalamnya ada element yang lain atau bisa dibayangkan sebuah kotak didalamnya ada kotak, semoga paham dan perhatikan script dibawah ini.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS 3 Opacity</title>
    <style>
        .kotak1 {
            width: 300px;
            height: 300px;
            background-color: blue;
            opacity: 0.8;
        }
        .kotak2 {
            width: 100px;
            height: 100px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="kotak1">
        <div class="kotak2"></div>
    </div>

</body>
</html>

 

Semoga kebayang lah ya contoh script yang ada di atas ini kalau ditampilin dibrowser kayak apa, nah dengan contoh seperti diatas itu ada kotak warna kuning didalam kotak warna biru yang otomatis dia juga kena transparan sebesar 80% atau 0.8, coba kenapa tuh padahal kita ga kasih transparan kan ? karena dia mewarisi transparansi dari element parentnya, nah untuk mengatasi hal tersebut kita tidak menggunakan opacity, kita akan pakai 1 property css yang nanti akan kita bahas tutorial setelah ini.

 

Oke mungkin itu cara penggunaan opacity salah satu property dari CSS 3 yang gunanya untuk membuat sebuah elementnya menjadi transparan mudah mudahan yang membaca tidak bingung kalau bingung silahkan tulis komentar diwabah ini.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *