CSS: Prozirnost u svim preglednicima

Kao i kod mnogih drugih web divota transparentnost u CSSu je još uvijek zbrkana i čeka se CSS3 koji će stvari, nadajmo se, dovesti u red.

Kobasica koja definira prozirnu klasu je standardne dužine:

div.transparent
{
      -moz-opacity:0.5;
      -khtml-opacity: 0.5;
      opacity: 0.5;
      filter:alpha(opacity=50);
}

0.5 znači 50% prozirnosti. Za veću prozirnost staviti manji broj i obratno. Svugdje, naravno, iste brojke (osim za filter koji ide od 0 do 100, a ne od 0.0 do 1.0).

• • • • •

Kako preglednici vide pojedina svojstva:

1. -moz-opacity je za stare verzije Firefoxa (te Netscape Navigator)
2. -khtml-opacity je za Konqueror i stare verzije Safarija
3. opacity je za browsere koji bar pomalo kuže CSS3: Firefox, Safari, Opera, Chrome i Internet Explorer 9+
4. filter property vidi samo Internet Explorer

Poredak svojstava je važan: prvo browser prefiksi, a na kraju CSS3.

A kako Internet Explorer 9 kuži CSS3 property preporuča se filter (za starije IE) staviti na kraj.

Vidi demo.

(izvor)

Vezani postovi:

- CSS: Kako centrirati sadržaj na stranici?
- CSS: Zaobljeni rubovi 2
- CSS: Targetiranje preglednika
- CSS: Zamjena teksta slikom
- Utopija za web majstore
- Zaobljeni rubovi

PS. CSS3 progress report @ W3C.