Membuat tampilan transparan dengan CSS

Tidak sedikit website yang ada sekarang ini dalam mendesain websitenya menggunakan teknik transparasi yang bertujuan supaya lebih terlihat modern dan tidak monoton dan lebih fresh. Adapun yang perlu diketahui bahwa teknik transparasi ini terdapat 2 jenis yang memiliki fungsi dan tujuan yang berbeda.

1. Menggunakan Opacity

Cara ini lebih cocok untuk membuat transparan pada bidang gambar dibandingkan dengan teks, meskipun pada kondisi tertentu tidak menutup kemungkinan untuk menggunakannya dengan teks.

.content
{
color:#FFF;
margin:50px 0 0 50px;
padding:12px;
width:300px;
background:#F9DE0C;
opacity:0.3;
}

Nilai opacity inilah yang menentukan tingkatan besar atau kecilnya tampilan transparan yang anda buat. Nilainya yang dapat anda input antara 0-1.

Agar dapat berjalan diseluruh browser yang ada disarankan tambahkan script berikut ini :

filter: alpha(opacity=50); /* internet explorer */
-khtml-opacity: 0.5;      /* khtml, old safari */
-moz-opacity: 0.5;       /* mozilla, netscape */
opacity: 0.5;           /* fx, safari, opera */

2. Menggunakan Background RGBA

Cara ini sama seperti menggunkan opacity, tetapi yang membedakan cara ini hanya membuat transparan pada sisi backgroundnya saja dan bukan pada object / tag yang dipilih.

.content
{
color:#FFF;
margin:50px 0 0 50px;
padding:12px;
width:300px;
background:rgba(249,222,12,0.1); /* background:rgba(red,green,blue,Aplha); */
}

Dalam penulisannya pun hampir sama dalam membuat background pada umumnya, hanya saja didalamnya terdapat struktur pewarnaan RGBA (Red,Green,Blue,Alpha). Untuk nilainya sendiri yaitu menggunakan bilangan desimal antara 0-255, berbeda dengan sebelumnya menggunakan hexadesimal 00-FF. Sedangkan nilai Alpha inilah yang dapat menentukan tingkatan besar atau kecilnya background transparan yang anda buat & penulisannya sama seperti menggunakan opacity.

Berikut ini merupakan hasil dari menggunakan Opacity dan Background RGBA :

noeorne-transparan

Normal

2

Opacity

 3

Background RGBA

1.       

2 thoughts on “Membuat tampilan transparan dengan CSS

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s