Opacity - The Image >> Opacity - DIVS
An interesting and sought after effect is the opacity or transparancy of an area. That is making the background of an area slightly see-through so you can kinda see the background behind it.

The first step is to create (or obtain) a PNG image that has about a 50% opacity value. If you are too lazy or really bad at using an image program, you can download this one... 50percent.png. Just do a File > Save As to collect the image from the new window that appears.

I used Photoshop5.5 to create the image. If you want a go at making it yourself, this is how I did it :
  • Start with a new image, 1x1 in size, with a transparent background.
  • Use the magnify command to get a good look at the image since it is rather small.
  • Click on the paint command, make the color white as the foreground color, adjust the paint settings to 50% opacity, and color the image.
  • File > Save for web.
  • Choose the 4 UP tab to see all of the options.
  • Change the settings value to PNG24 and check on for transparancy.
  • Click OK.
  • Enter "50percent" as the file name and you are done.
Now some of you already know that the IE browser cannot process the alpha channel or transparancy of PNG files. Don't worry, there is a coding to fix that.

The next step is to create a test page with an utterly annoying background image.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<title> my test page </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {background: #ffffff url(smilie.gif);}


click to see example

Next step, applying the DIVs...
Opacity - The Image >> Opacity - DIVS

Advertise in the banner along the top, Click here!

Valid XHTML 1.0 Transitional Valid CSS! Text Link Ads