Alpha blending is now possible thanks to improved browser support for PNG images with an alpha channel.
In essence the alpha channel controls the visibility and I use this together with layering images atop each other to provide texture and colour to style page elements.
About Alpha Blending
Alpha-blending is a technique that allows images to be laid on top of each other and allow parts
of other images to show through. It is rather like using an image on transparent film -
the backgrounds can show through and the colour or brightness is adjusted according to the
degree of transparency. The alpha channel is really a form of mask,
dictating what amount of information should be allowed to show through from lower-lying graphics.
To to use Alpha Blending on a web page
It is common to have transparent images where a specific color is defined as transparent (i.e. GIF), and we've all seen and used this to allow non-rectangular images on pages, however the alpha blending is more subtle as you can use it to have a gradual blending.
The technique that I have developed to get the effects that you see is to use the background-image in the CSS file with alpha blended images - and to use these to style elements. For example rather than having to colour each image you can use the transparency to create styled glossy backgrounds that will take the CSS background-color of the underlying element.
Building up layers of images
Think of the site as being built up using layers of transparent images to obtain the colouring effects.
We will start with a fairly simple background that is has an alpha channel - the following are all the same image - the colour styling is by setting background-color.
| Color #000 | Color #008 | Color #080 | Color #400 | Color #040 | Color #004 |
|---|---|---|---|---|---|
|
|
|
|
|
|
|
Page background
The first item on the page is the background - as below. This is a lot lighter for most of the area than
it will appear on the finished page. The layers that sit ontop of it will darken it.
The menu bar
The menubar is, of course, an unordered list - using a 120x30 alpha channel png to provide coloration. The
selected item in the list has a different background - one that isn't transparent.
Combining the alpha-blended elements to provide a heading bar
The entire area is layed out by contained <divs>. Firstly we need a div with the appropriate background
colour (black in this example). This background colour will be used throughout all the div layers and provides the
basic colouring.
Next we need to add the background for the page - this provides the graded colouration that you can see
On top of this we add the heading background - in this case the picture of the Château. Notice how this takes
both the background colour and the colours from the page background
Coloring the content area.
To darken the area that we need to put text onto - to make it more readable - we use a fairly dark black
transparent image repeated over the whole area.