Het werkt transparantie ofwel opacity met CSS

Inleiding

Transparantie gebruiken in een website is een van de sleutels tot het verkrijgen van een professioneel design. Dit werkt helaas niet hetzelfde voor elke browser. Daarom de volgende voorbeelden:

Stappen

Volgens de CSS3 richtlijnen:

• This paragraph has opacity 1.0.
• background-color:#30f;color:#fff;width:100%;opacity:1.0;
• This paragraph has opacity 0.8.
• background-color:#30f;color:#fff;width:100%;opacity:0.8;
• This paragraph has opacity 0.5.
• background-color:#30f;color:#fff;width:100%;opacity:0.5;
• This paragraph has opacity 0.2.
• background-color:#30f;color:#fff;width:100%;opacity:0.2;

Voor Internet Explorer

• This paragraph has opacity 1.0.
• background-color:#30f;color:#fff;width:100%;filter: alpha(opacity=100);
• This paragraph has opacity 0.8.
• background-color:#30f;color:#fff;width:100%;filter: alpha(opacity=80);
• This paragraph has opacity 0.5.
• background-color:#30f;color:#fff;width:100%;filter: alpha(opacity=50);
• This paragraph has opacity 0.2.
• background-color:#30f;color:#fff;width:100%;filter: alpha(opacity=20);

Voor oudere versie van Mozilla / Firefox

• This paragraph has opacity 1.0.
• background-color:#30f;color:#fff;width:100%;-moz-opacity:1.0;;
• This paragraph has opacity 1.0.
• background-color:#30f;color:#fff;width:100%;-moz-opacity:0.8;
• This paragraph has opacity 1.0.
• background-color:#30f;color:#fff;width:100%;-moz-opacity:0.5;
• This paragraph has opacity 1.0.
• background-color:#30f;color:#fff;width:100%;-moz-opacity:0.2;

Links

• http://webdesign.about.com/od/examples/l/blopacity.htm