Jak uzyskać efekt przeźroczystości za pomocą kaskadowych arkuszy stylów i do jakich elementów składowych witryn może on zostać zastosowany? Niniejszy artykuł stanowi przegląd sposobów uzyskiwania przeźroczystości czcionek oraz przeźroczystości tła.
W celu zastosowania „opacity” wykorzystywana jest technika RGBA oraz kilka znaczników, które stosowane łącznie zapewniają 100% skuteczności bez względu na rodzaj używanej przez odwiedzających witrynę przeglądarki.
W przypadku diva, którego chcemy wyposażyć w cechę przeźroczystości (ma przenikać przez niego np. background), możemy wybrać następujące znaczniki:
.przyklad
{opacity: .80;
filter: alpha(opacity=80);
-moz-opacity: 0.8;
}
Jak widzimy, w powyższym przykładzie nie została zastosowana technika RGBA. Zamiast niej użyte zostały trzy rodzaje filtrów. Zapewnią nam one uzyskanie efektu opacity we wszystkich najpopularniejszych wyszukiwarkach, także w sprawiającym permanentne problemy webmasterom, a ciągle mającym duży udział w rynku, Internet Explorerze.
Dzięki modyfikowaniu wartościami (między 0 a 1, względnie 0 a 100) możemy dowolnie operować natężeniem przeźroczystości od przeźroczystości całkowitej do przeźroczystości poziomu 0%. Należy pamiętać, że w celu osiągnięcia jednolitych efektów, trzeba nadać wszystkim znacznikom wartość kodującą to samo opacity, a więc te same liczby dla -moz-opacity oraz opacity oraz równo sto razy większą dla filter: alpha(opacity=80); .
Oczywiście efekt opacity nie jest atrybutem jedynie elementów blokowych. Można go zastosować również jako cechę czcionek, powodując przenikanie przez czcionki warstw umieszczonych „niżej”, a więc np. backgroundu diva.
p.przyklad
{color: rgba (100,143,21,0.5);
filter: alpha(opacity=50);
}
Powyższy zapis ustawia kolor definiowany przez rgb na rgb(100,143,21) z przeźroczystością 50%, za co odpowiada czwarta cecha funkcji rgba (0.5) oraz wartość filtru aplha (50). Filtr alpha zapewnia nam poprawne działanie efektu w przeglądarkach typu Internet Explorer.
Alternatywnym sposobem uzyskiwania przeźroczystości- nieangażującym formatu CSS i będącym zagadnieniem graficznym- jest stosowanie obrazów typu .png. PNG to format wprowadzony w 1995 roku i zalecany dzisiaj przez W3C. Co ważne z punktu widzenia tematyki artykułu, format PNG jest uważany za następce formatu GIF głównie dlatego, że posiada pełny kanał alpha (odpowiadający właśnie za obsługę przezroczystości). Używanie grafiki tego typu jest powszechnie spotykane w Internecie, należy jednak uważać na starsze wersje IE, które, mimo że zostały wydane po 1995 roku (są więc młodsze niż format PNG), nie renderują kanały alpha.
