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