Mobile Friendly Website


Doing it with style


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

Adding extra text on hover.
IE6 AlphaImage links error

IE6 links on png images
Partial Opacity II
Using opacity to produce an oval picture frame.


Although the demonstrations in this section are a little dated, I have kept them to show how CSS has progressed over the last ten years.

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.

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.


Your donations keep CSS PLAY running.
If your donation is for the use of a demo then please email me with the demo url after making your donation.


Facebook Twitter rss feed Facebook Fan Page