Part 3 of 3 CSS Opacity Color Tips and Tricks
By Michelle Goodrich -- Mandarin Design
(UDATED JANUARY 2006)

HTML Color Table

40% Opacity Table

000000 330000 660000 990000 CC0000 FF0000 003300 333300 663300 993300 CC3300 FF3300 006600 336600 666600 996600 CC6600 FF6600 009900 339900 669900 999900 CC9900 FF9900 00CC00 33CC00 66CC00 99CC00 CCCC00 FFCC00 00FF00 33FF00 66FF00 99FF00 CCFF00 FFFF00 00FF33 33FF33 66FF33 99FF33 CCFF33 FFFF33 00FF66 33FF66 66FF66 99FF66 CCFF66 FFFF66 00FF99 33FF99 66FF99 99FF99 CCFF99 FFFF99 00FFCC 33FFCC 66FFCC 99FFCC CCFFCC FFFFCC 00FFFF 33FFFF 66FFFF 99FFFF CCFFFF FFFFFF

000000 330000 660000 990000 CC0000 FF0000 003300 333300 663300 993300 CC3300 FF3300 006600 336600 666600 996600 CC6600 FF6600 009900 339900 669900 999900 CC9900 FF9900 00CC00 33CC00 66CC00 99CC00 CCCC00 FFCC00 00FF00 33FF00 66FF00 99FF00 CCFF00 FFFF00 00FF33 33FF33 66FF33 99FF33 CCFF33 FFFF33 00FF66 33FF66 66FF66 99FF66 CCFF66 FFFF66 00FF99 33FF99 66FF99 99FF99 CCFF99 FFFF99 00FFCC 33FFCC 66FFCC 99FFCC CCFFCC FFFFCC 00FFFF 33FFFF 66FFFF 99FFFF CCFFFF FFFFFF

CSS3 Color, Transparency, and Opacity

If the object is a container element, then the effect is as if the contents of the container element were blended against the current background using a mask where the value of each pixel of the mask is <alphavalue>.

We created two color charts in HTML and then added the black and white image imagine.jpg as the background in both tables. Each cell has a background color defined. We can't see the background image in the first table because the background table image is behind the fully opaque cell color.

The CSS we use for opacity looks like this.

Mozilla Opacity

The -moz-opacity:.40 proprietary code may not be needed. We used it in earlier versions of Mozilla and left it in for possible backward compatibility issues. Opacity works fine in our Mozilla Firefox browser without the proprietary code.

Opacity Applied to Table Row and Cells

When we make a table row or cell 40% opaque we can see through the color to reveal the image underneath. Add the style filter:alpha(opacity=40); opacity:.40; to adjust the opacity on a table, row, or cell.

000000	330000	660000	990000	CC0000	FF0000
003300	333300	663300	993300	CC3300	FF3300
006600	336600	666600	996600	CC6600	FF6600
009900	339900	669900	999900	CC9900	FF9900
00CC00	33CC00	66CC00	99CC00	CCCC00	FFCC00

This is a live table and is dependent on the browser. From here IE doesn't apply opacity to the row but does apply opacity to the four cells. In contrast, Firefox applies opacity to the four cells and the row. We are not using the -moz-opacity:.40; proprietary code for Mozilla because we think it is no longer needed.

Opacity Applied to Table Cells

This is a table. The background image is fully opaque.

Lay Color Over an Image with Opacity

We can use the CSS opacity property to apply color to an image, text, or an entire page. Add a blue background and the black and white image is instantly rendered in blue.

Table Opacity

The background image is defined in the table element. The opacity is applied only to the TD in our style sheet. So, when we make the cell blue it will automatically take on the 40% opacity so that we can see the image through the background color.

The code to type in your page looks like this.

It will look like this.

The cellpadding="0" and cellspacing="0" was changed to cellpadding="1" and cellspacing="0" so that the opacity works in Mozilla Firefox. This is not a deficiency in Mozilla, just an example that stopped working when the cellpadding and cellspacing were both set to "0".

DIV Opacity

We can achieve the color overlay effect using a div. This example uses CSS inline style so a direct copy and paste without adding anything to the style sheet will work. We are using two DIVs here. The first div contains a background defined as 300 x 200 pixels. The first div alone looks like this.

The second div is contained in the first div (a nested div). In this example the second div contains the opacity effect.

<div style="width:300px;height:200px;
background:url(http://www.mandarindesign.com/images/imagine.jpg)">
<div style="width:300px;height:200px;
background:blue;filter:alpha(opacity=40);
-moz-opacity:.40;opacity:.40;"></div> 
</div> 

The result looks like this (in your browser).

Copy and paste this in your Blog or Web page.

It will look like this.

You can try other colors and levels of opacity.

Red

Blue

Green

Lay Image Over Color With Opacity

We are doing the opposite here, laying the image over the color rather than the color over the image. The original image is black and white. The width and height are required for opacity to work. We used family.gif with width:250px;height:236px.

The first div contains and displays the background color named red. We applied 90% opacity to the background color. It's adjustable.

The second div contains and displays the black and white image. We used 70% opacity on the image.

Copy and paste this in your Blog or Web page.

It will look like this.

Flip-flop for Opera

We flip flopped the code to put the image with opacity appplied on top of the color instead of the color on top of the image. Why? It will at least render an image in Opera. Laying the color over the image without the opacity working in Opera results in a big colored square.

Opera is the only known browser that doesn't support the opacity property as of today, but putting the image on top of the background will allow Opera browsers to see the image.

Opera browsers will not see the opacity effect. It will look like this in Opera.

All other known browsers support the opacity property even though it is CSS3 and not required yet.

Opacity Color Reference Tables

25% Opacity Table

50% Opacity Table

000000 330000 660000 990000 CC0000 FF0000 003300 333300 663300 993300 CC3300 FF3300 006600 336600 666600 996600 CC6600 FF6600 009900 339900 669900 999900 CC9900 FF9900 00CC00 33CC00 66CC00 99CC00 CCCC00 FFCC00 00FF00 33FF00 66FF00 99FF00 CCFF00 FFFF00 00FF33 33FF33 66FF33 99FF33 CCFF33 FFFF33 00FF66 33FF66 66FF66 99FF66 CCFF66 FFFF66 00FF99 33FF99 66FF99 99FF99 CCFF99 FFFF99 00FFCC 33FFCC 66FFCC 99FFCC CCFFCC FFFFCC 00FFFF 33FFFF 66FFFF 99FFFF CCFFFF FFFFFF

000000 330000 660000 990000 CC0000 FF0000 003300 333300 663300 993300 CC3300 FF3300 006600 336600 666600 996600 CC6600 FF6600 009900 339900 669900 999900 CC9900 FF9900 00CC00 33CC00 66CC00 99CC00 CCCC00 FFCC00 00FF00 33FF00 66FF00 99FF00 CCFF00 FFFF00 00FF33 33FF33 66FF33 99FF33 CCFF33 FFFF33 00FF66 33FF66 66FF66 99FF66 CCFF66 FFFF66 00FF99 33FF99 66FF99 99FF99 CCFF99 FFFF99 00FFCC 33FFCC 66FFCC 99FFCC CCFFCC FFFFCC 00FFFF 33FFFF 66FFFF 99FFFF CCFFFF FFFFFF

75% Opacity Table

Fully Opaque

000000 330000 660000 990000 CC0000 FF0000 003300 333300 663300 993300 CC3300 FF3300 006600 336600 666600 996600 CC6600 FF6600 009900 339900 669900 999900 CC9900 FF9900 00CC00 33CC00 66CC00 99CC00 CCCC00 FFCC00 00FF00 33FF00 66FF00 99FF00 CCFF00 FFFF00 00FF33 33FF33 66FF33 99FF33 CCFF33 FFFF33 00FF66 33FF66 66FF66 99FF66 CCFF66 FFFF66 00FF99 33FF99 66FF99 99FF99 CCFF99 FFFF99 00FFCC 33FFCC 66FFCC 99FFCC CCFFCC FFFFCC 00FFFF 33FFFF 66FFFF 99FFFF CCFFFF FFFFFF

000000 330000 660000 990000 CC0000 FF0000 003300 333300 663300 993300 CC3300 FF3300 006600 336600 666600 996600 CC6600 FF6600 009900 339900 669900 999900 CC9900 FF9900 00CC00 33CC00 66CC00 99CC00 CCCC00 FFCC00 00FF00 33FF00 66FF00 99FF00 CCFF00 FFFF00 00FF33 33FF33 66FF33 99FF33 CCFF33 FFFF33 00FF66 33FF66 66FF66 99FF66 CCFF66 FFFF66 00FF99 33FF99 66FF99 99FF99 CCFF99 FFFF99 00FFCC 33FFCC 66FFCC 99FFCC CCFFCC FFFFCC 00FFFF 33FFFF 66FFFF 99FFFF CCFFFF FFFFFF

Note: We are testing Opacity in Opera using the Windows build 8238 found at OPERA DESKTOP TEAM. As of today Opacity is working in this version of Opera with minor issues. No show stoppers.

Part 3 of 3