[Re]Encoded.com

CSS Transparency Sources

Transparency in images and backgrounds occurs everywhere on the web. A few years ago, it was not a reliable trick on every browser. Currently you need to code CSS specifically for different browsers, but you can consistently achieve the transparent effect on all browsers.

The best place to learn the basics is to use the W3schools tutorial on image transparency. After you understand the basics you might want to progress to using CSS for all browsers. These techniques will get you started, but it is not as simple as it seems. According to Robert Nyman, you may encounter a problem with a child element’s inheritance.

A quick and easy solution for transparency and menus are these free script sources:

Transparent Opacity Rollover Menu

Transparent Vertical Menu

Another simple solution to achieve transparency:

Text Blocks over an Image

Tutorial Hero has a large collection of transparency tutorials available for transparency enthusiast that includes transparent scroll bars and a very interesting transparent tab menu script from Dynamic Drive. Eric A. Meyer’s Complex Spiral Demo is necessary read to develop your transparency skills as well as his advanced articles on the complex spiral distorted and devolved. Finally, there is the problem with opacity validation in your style sheet. Evaria.com offers a great workaround so your CSS will validate. Use these tips and you will be on your way to creating a variety of CSS transparency scripts.

• Tweet