Pada kesempatan kali ini saya akan menjelaskan cara membuat efek transparant di css. Seperti yang teman-teman sudah ketahui, ketika teman-teman ingin membuat tampilan warna sebuah kotak element di css dapat menggunakan property background atau background-color yang di ikuti dengan kode warna sebagai value atau nilai dari property tersebut. Lantas bagaimana jika teman-teman ingin membuat tampilan kotak tersebut menjadi berwarna dan transparant atau tembus pandang ?
Jawaban nya adalah BISA, dan teman-teman tidak perlu khawatir, karena di CSS, ada dua opsi atau dua cara untuk membuat nya menjadi transparant, teman-teman bisa memanfaatkan property opacity atau property background RGBA untuk membuat sebuah kotak element tersebut terlihat menjadi transparant atau tembus pandang. Dan pada contoh di sini saya akan jabarkan satu persatu.
Berikut contoh nya :
-
Menggunakan Property Opacity
Cara ini sebenarnya lebih cocok jika teman-teman buat untuk bidang gambar di bandingkan teks, meskipun pada kondisi tertentu tidak menutup kemungkinan untuk bisa teman-teman gunakan dengan teks, berikut kode nya :
|
1 2 3 4 5 6 7 8 9 10 11 |
.kotak-opacity { color:#FFF; font-size:14px; font-weight:bold; padding:20px; margin:30px; width:40%; background:#f00; opacity:0.4; } |
Nilai opacity tersebut yang dapat menentukan tingkat tebal atau tipis nya tampilan transparan yang teman-teman buat. nilai tersebut dapat di tentukan antara 0-1.
-
Menggunakan Property Background RGBA
Cara ini hampir sama dengan menggunkan opacity, yang membedakan cara ini hanya membuat transparan pada sisi background nya saja dan bukan pada object yang dapat teman-teman pilih, berikut kode nya :
|
1 2 3 4 5 6 7 8 9 |
.kotak-rgba { color:#FFF; font-size:14px; font-weight:bold; padding:20px; margin:30px; width:40%; background:rgba(249,222,12,0.1); /* background:rgba(red,green,blue,Aplha); */ } |
Dalam penulisan kode tersebut hampir sama dalam membuat background pada umum nya, hanya saja di dalamnya terdapat struktur pewarnaan RGBA (Red,Green,Blue,Alpha). Untuk value atau nilai tersebut menggunakan bilangan desimal antara 0 s/d 255, berbeda dengan sebelum nya yang menggunakan hexa desimal 00 s/d FF. Sedangkan nilai Alpha tersebut yang dapat menentukan tingkatan besar atau kecilnya background transparan yang teman-teman buat & penulisan nya pun sama seperti menggunakan opacity.
Demikian penjelasan mengenai cara membuat efek transparant di css, Semoga Bermanfaat.