Transparent Color In Web Appearance

Sometimes we want that our background text to be transparent to our base web background, this code can make your dream come true... cheers.. :p



Example 1:

For the web with themes option include color, find the color code exm. "#ddddd" with the "#" only

For the web without themes option so you must find in your css editor, sometimes you can find it ini the .php

 

Example 2:

Change the code "background:#ddddd;" to "background:#;"

 

Example 3:

Change the code "background:#ddddd;" to "background:transparent;"

For any color at specific place change the code "color:#ddddd;" to "color:transparent;"

 

Example 4:

For the CSS Style this quiet complicated (for me :p).

CSS Stye have two property if you want make transparent appearance, first is "Opacity" and the second one is "background" with the value of RGBA (Red, Green, Blue, Alpha).

For the Opacity:

HTML Code:

<div class="transparan1"></div>
CSS Code:

.transparan1{background:#000;opacity:0.4;filter:alpha(opacity=40);}

 

Mean of value for opacity and alpha is if 0.1 equal to 10%, 0.2=20% and so on.

But if you want to use filter, so the value is without % symbol, exm. 12 mean 12%, 50=50%, and so on.

 

If we using Opacity property so the effect for the element with the opacity is effecting the whole elements including text, background color, image, frame.

 

For the RGBA:

HTML Code:

<div class="transparan2"></div>
CSS Code:

.transparan2{background:rgba(0,0,0,0.4);}

 

If you using background rgba so the effect is wont effecting the whole elements. But the other problem is, this trick doesn't support by Microsoft Internet Explorer 7 and 8, but actually I don't care about IE, coz for me a lot of user using mozilla or chrome this day.

 

You can find a reference of color code from:

http://id.wikipedia.org/wiki/Daftar_warna

http://id.wikipedia.org/wiki/Warna_web

http://htmlcssguides.com/web-design-tool/kode_hexadecimal_rgb.php

 

Table of Color from wikipedia;

Nama	Contoh	Kode warna	RGB			CMYK	HSV
Abu-abu		#808080	128	128	128	58, 50, 47, 0	0, 0, 50
Biru		#0000FF	0	0	255	95, 73, 0, 0	240, 100, 100
Biru laut		#000080	0	0	128	100, 99, 56, 46	240, 100, 50
Coklat		#964B00	150	75	0	59, 82, 100, 43	30, 100, 59
Emas		#FFD700	255	215	0	0, 17, 94, 0	51, 100, 100
Hijau		#00FF00	0	255	0	62, 0, 100, 0	120, 100, 100
Hitam		#000000	0	0	0	93, 88, 89, 90	0, 0, 0
Kuning		#FFFF00	255	255	0	0, 0, 255, 0	60, 100, 100
Magenta		#FF00FF	255	0	255	0, 100, 0, 0	300, 100, 100
Mawar		#FF007F	255	0	127	0, 100, 50, 0	330, 100, 100
Merah		#FF0000	255	0	0	0, 255, 255, 0	0, 100, 100
Merah marun		#800000	128	0	0	0, 255, 255, 127	0, 100, 50
Merah jambu		#FFC0CB	255	192	203	0, 63, 52, 0	350, 25, 100
Nila		#6F00FF	111	0	255	57, 100, 0, 0	266, 100, 100
Oranye		#FF7F00	255	127	0	0, 50, 100, 0	30, 100, 100
Perak		#C0C0C0	192	192	192	0, 0, 0, 63	0, 0, 75
Putih		#FFFFFF	255	255	255	0, 0, 0, 0	0, 0, 100
Sian		#00FFFF	0	255	255	100, 0, 0, 0	180,100,100
Ungu		#BF00FF	191	0	255	25, 100, 0, 0	285, 100, 100
Violet		#8F00FF	143	0	255	44, 255, 0, 0	274, 100, 100
Zaitun		#808000	128	128	0	0, 0, 100, 50	60, 100, 50

Excerpted from: htmlcssguides.com