Belajar css opacity transparan

belajar css

Kegunaan css opacity

Opacity sekarang menjadi bagian dari spesifikasi CSS3, tetapi opacity sudah ada sejak lama. Namun, browser lama memiliki cara yang berbeda untuk mengontrol opacity atau transparansi. Opacity memiliki nilai default 1 (satu) dan opacity tidak diwarisi, tetapi karena induk memiliki opacity yang diterapkan sehingga semua yang ada di dalamnya ikut transparan. Tetapi Anda bisa menerapkan opacity pada elemen induk agar tidak berpengaruh pada elemen didalamnya dengan menggunakan nilai color RGBA.

Opacity dengan image

Anda bisa membuat gambar menjadi transparan dengan property opacity. Gambar dibawah ini mempunyai nilai berbeda pada setiap property opacity.

Opacity 0.2 kucing hitam yang lucu
Opacity 0.5 kucing hitam yang lucu
Opacity 1 (default) kucing hitam yang lucu

Contoh:

Editor Online
  1. #gambar1 {
  2. opacity: 0.2;
  3. }
  4. #gambar2 {
  5. opacity: 0.7;
  6. }

Cross browser opacity

Browser lama memiliki cara yang berbeda untuk mengontrol opacity atau transparansi. Salah satunya property opacity yang tidak didukung pada browser Internet explorer versi 8 dan sebelumnya. Agar bekerja pada Internet explorer versi 8 dan sebelumnya Anda bisa menggunakan metode cross browser, Silakan gunakan property filter: alpha(opacity=x). X dapat mengambil nilai dari 0 – 100. Sebuah nilai yang lebih rendah membuat elemen lebih transparan.

Contoh:

Editor Online
  1. img {
  2. opacity: 0.4;
  3. filter: alpha(opacity=40);
  4. }

Opacity dengan efek hover

Anda bisa mengkombinasikan style property opacity dengan :hover.

Contoh:

Editor Online
  1. img {
  2. opacity: 0.6;
  3. filter: alpha(opacity=60);
  4. }
  5. img:hover {
  6. opacity: 1.0;
  7. filter: alpha(opacity=100);
  8. }

Teks dalam box transparan

Jika Anda menggunakan property opacity maka semua elemen yang ada di dalamnya ikut transparan. Opacity tidak mewarisi, tetapi karena induk memiliki opacity yang diterapkan sehingga semua yang ada di dalamnya ikut transparan. Ini membuat teks di dalam elemen ikut transparan dan sulit dibaca jika nilai opacity menjadi lebih rendah.

Opacity 1 (default)
Opacity 0.7
Opacity 0.4
Opacity 0.1

Contoh:

Editor Online
  1. div {
  2. background-color: red;
  3. padding: 15px;
  4. }
  5. #box1 {
  6. opacity: 0.1;
  7. filter: alpha(opacity=10);
  8. }
  9. #box2 {
  10. opacity: 0.4;
  11. filter: alpha(opacity=40);
  12. }
  13. #box3 {
  14. opacity: 0.7;
  15. filter: alpha(opacity=70);
  16. }

Transparan menggunakan RGBA

Seperti pada contoh diatas, jika Anda menggunakan property opacity maka elemen yang ada didalamnya ikut transparan. Dengan menggunakan nilai color RGBA Anda bisa menerapkan transparan hanya pada elemen induk saja dan tidak akan mengenai elemen didalamnya atau elemen anak.

Opacity 1 (default)
Opacity 0.7
Opacity 0.4
Opacity 0.1

Contoh:

Editor Online
  1. div {
  2. background-color: red;
  3. padding: 15px;
  4. }
  5. #box1 {
  6. background: rgba(255, 0, 0, 0.1);
  7. }
  8. #box2 {
  9. background: rgba(255, 0, 0, 0.4);
  10. }
  11. #box3 {
  12. background: rgba(255, 0, 0, 0.7);
  13. }

Belajar lebih dalam tentang color CSS

Leave a Reply

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