This lesson assumes that you already have a CSS layout for your myspace page and need to change the transparency of a section. This lesson also assumes that you have at least introductory experience with Cascading Style Sheets

Transparency is a popular way to decorate a page, both in myspace and with other popular services. It is fairly easy to do as long as you keep a few details in mind :

1. Know what the code is!
2. Know exactly what you want to make transparent
3. Know how transparent you want to make it
4. Remember to set code for both internet explorer and mozilla type browsers

1 - Know what the code is

float:left; filter:alpha(opacity=80); -moz-opacity:.80; opacity:.80;

There are 4 lines to this. The first is the placement. You have to set a placement for this transparency / opacity change to work.

We used float:left; This works for IE and Mozilla / Firefox.

Because you want your code to work on multiple browsers - use all 3 versions of this code

float:left;
filter:alpha(opacity=80);
-moz-opacity:.80;
opacity:.80;

You can tweak those numbers to get different effects. Just note that opacity =100 means it's opaque.

2 - Knowing what to make transparent

This code goes within the { } for your CSS definition. You most likely won't want to make your entire layout transparent - although there are some cases where this might be appealing. For example :

To make a specific table content transparent place your code within the CSS definition for those tables.

eg for your myspace tables

table table table {

float:left;
filter:alpha(opacity=80);
-moz-opacity:.80;
opacity:.80;

}

3 - Know how transparent to make this

This is entirely subjective. You simply need to tinker with the numbers to figure out how transparent to make it. Just remember that # opacity = 100 - opacity transparency. Therefore 30 % opacity = 70 % transparent

4 - Remember to set code for both internet explorer and mozilla type browsers

The code listed above covers both IE and Mozilla Firefox. It is somewhat redundant but it is worth keeping.

Here's an example of a table which has been set to be at 50 % opacity. Do not forget to assign the class to your element or this won't work!

This is the text in this table This is at 50 % opacity

css code: <style type="text/css"> .testtable { float:left; filter:alpha(opacity=50); -moz-opacity:.50; opacity:.50; } </style> HTML CODE : <table width="50%" border="0" class="testtable"> <tr> <td><strong>This is the text in this table </strong></td> </tr> <tr> <td><img src="/images/scrollingimage.jpg" width="466" height="206"></td> </tr> <tr> <td>This is at 50 % opacity </td> </tr> </table>

We hope you will find this useful. This is another example of how versatile CSS can be for designing your page layouts.

discuss this topic to forum