Cara membuat gambar opacity atau blur di CSS
Opacity digunakan untuk memberikan efek transparan pada elemen. Opacity sekarang menjadi bagian dari
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 properti opacity.
Gambar dibawah ini mempunyai nilai berbeda pada setiap properti opacity.



#gambar1 {
opacity: 0.2;
}
#gambar2 {
opacity: 0.7;
}
Cross browser opacity
Browser lama memiliki cara yang berbeda untuk mengontrol opacity atau transparansi. Salah satunya properti 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 properti filter: alpha(opacity=x)
. X dapat mengambil nilai dari 0 – 100. Sebuah nilai yang lebih rendah membuat elemen lebih transparan.
img {
opacity: 0.4;
filter: alpha(opacity=40);
}
Opacity dengan efek hover
Anda bisa mengkombinasikan style properti opacity
dengan efek :hover
atau ketika mouse diatas elemen pada kasus ini gambar.
img {
opacity: 0.6;
filter: alpha(opacity=60);
}
img:hover {
opacity: 1.0;
filter: alpha(opacity=100);
}
Teks dalam box transparan
Jika Anda menggunakan properti 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.
div {
background-color: red;
padding: 15px;
}
#box1 {
opacity: 0.1;
filter: alpha(opacity=10);
}
#box2 {
opacity: 0.4;
filter: alpha(opacity=40);
}
#box3 {
opacity: 0.7;
filter: alpha(opacity=70);
}
Transparan menggunakan RGBA
Seperti pada contoh diatas, jika Anda menggunakan properti 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.
div {
background-color: red;
padding: 15px;
}
#box1 {
background: rgba(255, 0, 0, 0.1);
}
#box2 {
background: rgba(255, 0, 0, 0.4);
}
#box3 {
background: rgba(255, 0, 0, 0.7);
}
Belajar lebih dalam tentang color CSS