BBProject.net

Jeśli chcecie uzyskać efekt przeźroczystości na swojej stronie www, a jednocześnie nie chcecie kombinować z kodem JavaScript albo jeszcze gorzej, tworzyć odpowiednio spreparowanej grafiki (jak za dawnych czasów), to dobrym wyjściem będzie skorzystanie z dobrodziejstw arkuszy stylów w wersji trzeciej.

Niestety nie wszystkie przeglądarki obsługują w pełni CSS 3, dlatego posłużymy się pewnymi sztuczkami, aby efekt docelowy mógł być widoczny dla jak największej ilości odbiorców.

Na potrzeby tego wpisu, stworzyłem sobie prostą stronę z jednym elementem graficznym, oraz warstwą w jego wnętrzu o kolorze czarnym. Jeśli chciałbym teraz aby czarny prostokąt stał się przeźroczysty, wystarczy że zastosuje dla niego następującą klasę CSS:

.transparent
{
  opacity: 0.5;
}

W efekcie otrzymamy przeźroczysty w 50% czarny kwadrat.

Przed i po zastosowaniu klasy .transaprent

Właściwość opacity jest jednym z elementów CSS 3, dlatego, aby uodpornić się na inne przeglądarki, dodamy nieco dodatkowych właściwości, które niestety nie są zgodne z specyfikacją CSS w żadnej wersji. Nie mniej, nasza strona będzie poprawnie wyświetlana w większości popularnych przeglądarek (FF, Opera, IE, Chrome, inne oparte o silnik WebKit).

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