Opacity demonstrations

Opaque Colours
A colour wheel showing how colours mix.
Fade in an image
Fading in an image
Opaque Menu
An opaque menu that uses :hover to give no opacity.
Partial Opacity
Four different methods of opacity.
Image hover text » 13-05-2007
Adding extra text on hover.
IE6 AlphaImage Loader with links error » 14-03-2008
Overcoming the problem of links placed on top of a png image using AlphaImageLoader
Partial Opacity II
Using opacity to produce an oval picture frame.

Information

A section to explore the Opacity 'feature' of IE, Netscape and Mozilla.

Though not a w3c recommendation, it has been adopted by these browsers, although they do have different methods of defining the opacity of an element (of course).

20th June 2004

Mozilla 1.7 and firefox 0.9 support CSS3 opacity

No more additions until all browsers support the w3c recommendations.

19th May 2007

With the release of Internet Explorer 7, opacity is now supported by all the latest releases of the major browsers, so I shall now begin to re-examine methods of using this styling.



Copyright

Most of my demonstrations can be used without asking for permission. However, some will require email approval first. Just check each page for the copyright requirements before use.

If you are having problems integrating any of my demonstrations into your website then I now offer a service to fault find and correct any errors that you may have introduced. Please email me for more information.


Latest Demonstrations

Opacity
IE6 AlphaImage Loader with links error - 14-03-2008Overcoming the problem of links placed on top of a png image using AlphaImageLoader
Image hover text - 13-05-2007 Adding extra text on hover.
A fade-in image - 04-02-2007 Making an image gradually appear using just css

Please Support CSS play

For more CSS demonstrations I recommend that you visit the Dynamic Drive CSS Library.


Free, practical CSS menus, layouts, and examples

Follow CSS play


Facebook   Twitter   Facebook Fan Page