One of the sexiest -- and least known -- special effects in the WebTV box is transparency. Images, text, and background table colors all can be made partially transparent. The results can be stunning, and cost in download time is free!
Transparency is an attribute that is added to the tag you're using to set a background color, specify a font, or call an image. It can have any value from 0 (not transparent), to 100 (completely transparent).
Here's an example:
The code that sets the background color in this table cell is:
|
|
<TD BGCOLOR="#006600">
|
This code for this cell is identical, except for the transparency attribute:
|
|
<TD BGCOLOR="#006600" transparency=50>
|
|
All of the transparency attributes work exactly this way -- that is, they do not stand alone, but are added to a tag modify the tag. If you look closely, you can see the pattern of the page background through the color of the table cell background.
|
|
Transparency in Table BGs |
Transparency can be used in both table backgrounds, and in the backgrounds of individual table cells. This can be very effective in helping to identify groups of items in tables. For example, the Net4TV Site Map uses a table background color to identify each part of the site, and then a cell of the same color with less transparency for the headings of each section.
Placed images are made transparent the same way, by adding a transparency attribute to the <IMG> tag. Here is an example of a single image with different amounts of transparency in each of the tags used to call it:
<IMG SRC="graphics/trans_ex1.gif" height=83 width=216 transparency=0>
<IMG SRC="graphics/trans_ex1.gif" height=83 width=216 transparency=20>
<IMG SRC="graphics/trans_ex1.gif" height=83 width=216 transparency=50>
<IMG SRC="graphics/trans_ex1.gif" height=83 width=216 transparency=70>
To use transparency in type, simple add the transparency attribute to the <font> tag. Here are some examples and the code:
<font color="#FFFFFF" size=5 transparency=0>
<font color="#FFFFFF" size=5 transparency=20>
<font color="#FFFFFF" size=5 transparency=40>
<font color="#FFFFFF" size=5 transparency=60>
<font color="#FFFFFF" size=5 transparency=80>
By the way, don't forget to close your tag with </font>, or the rest of your page will keep the transparency you set.
- Transparency takes a little longer to display than ordinary (non-transparent) images, tables and text. Transparency display is optimized for 50.
- If you use a GIF with a portion transparent over a table background transparency, the GIF transparency doesn't work.
- Transparency works in table and cell background colors, but not in background images.
- Use transparency to pull down image colors that are too bright (made for computers) so that they look great on WebTV by setting transparency=20.
- There are some transparency "bugs" in the values around 30 that can turn into strange colors. If this happens to you, just make the value higher or lower until you get the color you want.
Dudette
|
|
