Selasa, 17 Januari 2017

Belajar CSS : CSS Opacity

Hallo teman-teman semua, pada kesempatan kali ini saya akan memposting tengtan CSS Opacity atau membuat gambar menjadi transparant. Berikut metrinya

CSS OPACITY
Untuk mengatur efek transparant pada gambar kita bisa menggunakan properti opacity. Properti opacity dapat mengatur dengan ukuran 0,0-1,0 Semakin rendah ukuran tersebut maka semakin transparan. Bukan hanya gambar saja yang bisa dibuat transparan tetapi juga bisa membuat box atau kotak transparan dengan menambahkan unsur warna pada kotak tersebut.

Contoh membuat gambar menjadi transparan :


Agar tampilan seperti yang diatas bisa mengikuti script dibawah ini:

 
 
Penjelasan :
  • opacity: 0.5; digunakan untuk mengatur transparant gambar.
  • filter: alpha(opacity=50); yaitu untuk memberikan kesan pada tampilan awal gambar.
  • :hover, digunakan apabila kursor pengguna menyentuh gambar maka akan muncul gambar yang lebih jelas dari yang sebelumnya.
  • img src, untuk memanggil gambar yang diperlukan/digunakan.


Referensi :
http://www.w3schools.com/css/css_image_transparency.asp

Sekian dan terimakasih

0 komentar:

Posting Komentar