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

Berkas:Cube Color.png

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

Advertisements

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