Tutorial

Piotr Petrus


Przezroczystość jest bardzo ciekawym efektem graficznym, którego zalet nie trzeba przedstawiać. Wbrew obiegowej opinii, można go z powodzeniem stosować na stronach internetowych, także na tych mających działać pod Internet Explorerem 6.

Numer 17 (3/2006) • 31 grudnia 2006


Magnus Blomster : Minigaleria

Piotr Petrus
Przezroczystość w WWW

Ilustracja: Magnus Blomster


Przezroczystość w WWW


Możliwości i problemy


Przezroczystość oferowana przez GIF bądź PNG bez kanału alfa działa na zasadzie pustych pikseli. W ten sposób obrazek z rozmytymi krawędziami, w programie graficznym wtapiający się w tło, zostanie zapisany z postrzępionymi krawędziami.

Przezroczyste pliki

W zaawansowanych programach można przy zapisie ustawić opcję Matte, pozwalającą podłożyć pod wszystkie piksele obrazka warstwę danego koloru. W ten sposób jeśli nałożymy taki obrazek na tło tego samego koloru co Matte, jakość krawędzi będzie idealna.

O wiele lepszy efekt można uzyskać stosując pliki z kanałem alfa. PNG i wersja 32 bitowa BMP oferują częściową przezroczystość piksela. Pozwala to na nakładanie obrazka na dowolne tło, niezależnie czy jest to jednolity kolor czy inny obrazek, zdjęcie albo część layoutu strony.

Przezroczystość CSS

W wersji podstawowej, CSS oferuje całkowicie przezroczyste tło, po ustawieniu właściwości background-color jako transparent.

Szkic specyfikacji CSS w wersji trzeciej oferuje nam właściwość opacity oraz nowy sposób przedstawiania koloru - rgba().

Oczywiście możemy też łączyć przezroczyste obrazki dzięki tłom w CSS.

transparent

Tak naprawdę jest to domyślna wartość koloru tła większości elementów (w CSS1), trudno więc by nie dało się przywrócić jej w kaskadzie po ówczesnym nadpisaniu.

Użycie:

  1. p { background-color: #F00; }
  2. p.special { background-color: transparent; }

Użycie w skróconej właściwości background:

  1. div { background-color: #666; }
  2. div.important { background: transparent url(exclamation.jpg) left top no-repeat; }

W CSS2 można ją także stosować do obramowania:

  1. border-color: transparent;
  2. border: 1px solid transparent;

Takiego zapisu nie rozumie Explorer 6.

Należy również wspomnieć, że w szkicu specyfikacji CSS3 słowo kluczowe transparent odnosi się do każdego miejsca, gdzie można użyć koloru, czyli m.in. także do tekstu.

opacity

Opacity wpływa na przezroczystość całego bloku oraz wszystkich bloków znajdujących się w nim. Przezroczyste stają się obramowania (border), tło (background), tekst oraz te same właściwości rekursywnie dla wszelkich elementów w środku.

Wartość opacity należy ustawiać w zakresie od 0 do 1. Przykładowo opacity: 0.7 odpowiada 70% przezroczystości.

Jeśli wewnętrzny blok ma ustawione opacity na wartość inną niż domyślna (1) to oczywiście następuje zmniejszenie widoczności, ale efekt się łączy - przez co możemy w końcu dojść do zniknięcia elementu, jeśli będziemy powtarzać sztuczkę.

Co ważne, a zarazem nieuniknione - nie da się zlikwidować przezroczystości elementowi zagnieżdzonemu w takim z ustawionym opacity. Jedyne wyjście to wyjąć element w HTML i wstawić go obok oraz skorzystać z pozycjonowania.

  1. <div id="cont">
  2. <div class="transparent">...</div>
  3. <div class="normal">...</div>
  4. </div>

  1. div#cont {
  2. position: relative;
  3. }
  4.  
  5. div.transparent {
  6. opacity: 0.5;
  7. background-color: #FF0;
  8. position: absolute;
  9. }
  10.  
  11. div.normal {
  12. background-color: #F80;
  13. position: absolute;
  14. }

W tym przykładzie użyliśmy kontenera do wypozycjonowania względem niego dwóch bloków - nachodzą na siebie. Demo (nie działa na IE, dojdziemy do tego) - dla lepszego rozpoznania przezroczystości bloków dodałem pasek w tle strony.

rgba()

W nadchodzącej specyfikacji CSS3 znajdziemy także nową deklarację kolorów. Jest to rozwinięcie starego rgb(), gdzie podawać można w trzech parametrach kolejno udział koloru czerwonego, zielonego i niebieskiego. Przykład:

  1. color: rgb(255, 0, 0);
  2. border-color: rgb(100%, 0, 0);

Oznaczać będzie to kolor czerwony (#F00). Rgba() jest wyjściem naprzeciw kanałowi alfa, czyli mówiąc potocznie - przezroczystości danego koloru.

  1. color: rgba(255, 0, 0, 0.5);
  2. border-color: rgba(100%, 0, 0, 30%);

Dzięki takiej deklaracji możemy ustawić częściwo przezroczyste obramowanie albo taki tekst pozostawiając tło nietknięte. Bądź na odwrót.

Można też wspomnieć o kolejnej notacji CSS3 - hsla(), odnoszącej się do HSL (Hue, Saturation, Lightness - Odcień, Nasycenie, Jasność) z kanałem alfa.

CSS - Internet Explorer

Explorer 6 nie ma wsparcia dla opacity, więc nie zobaczymy przezroczystego bloku na stronie. Jednak Microsoft poszerzyl minimalne wsparcie CSS zestawem swoich filtrów. Tak się składa, że dostępny jest filtr przezroczystości.

  1. filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);

Ustawi przezroczystość na 50%, co jest równe opacity: 0.5. Dla przykładu - demo użyte wyżej, teraz działające na IE.

Opacity Workaround

Ważna informacja - filtry zadziałają tylko na blokach, które mają włączony hasLayout 1. Właściwość hasLayout nie da się modyfikować inaczej jak przez nadanie innych właściwości CSS. Mogą to być podane wymiary (height, width), display: inline-block, position: absolute albo zoom: 1.

Ostatnia właściwość specyficzna dla Microsoftu nie robi nic poza włączeniem layoutu, ponieważ "powięszenie" elementu wynosi 1 - czyli standardową wielkość. Zoom nie istnieje w IE5.

Obrazki - Internet Explorer

Generalnie rzecz biorąc z przezroczystymi obrazkami, czy to z kanałem alfa czy bez nie ma problemów - jeśli nie bierzemy pod uwagę Explorera 6. Co ciekawe, Explorer 5 na Macintosha obsługuje normalnie PNG. Wchodząca, siódma wersja Explorera wyświetla już poprawnie przezroczyste obrazki.

Najpopularniejsza wersja szósta domyślnie potrafi on wyświetlać tylko GIF i PNG8 bez kanału alfa. PNG dodatkowo należy specjalnie potraktować 2, aby zgadzały się kolory. PNG8 alpha i PNG24 należy obsłużyć za pomocą Microsoftowego filtra. Pamiętajmy, że elementy z filtrem muszą posiadać hasLayout, jak opisałem to w akapicie wyżej.

background-image

Przez CSS, korzystając z rozszerzeń giganta z Redmond, możemy ustawić przezroczysty obrazek tła

  1. filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="", sizingMethod="");

Filtr ten wstawi obrazek w tło elementu - podajemy do niego ścieżkę w src. Trzeba zaznaczyć, że tak naprawdę nie będzie to prawdziwe tło, tylko obrazek-obiekt wstawiony pod tekst. Dlatego w pliku CSS dla IE należy najpierw zresetować tło dla elementu, potem nadać filtr.

  1. background: none;
  2. filter: progid:DXImageTransform.

Z tego powodu odpada także pozycjonowanie oraz powtarzanie takiego tła. Ważne więc jest, aby ustawić odpowiedni sizingMethod. Domyślnie (jeśli pominiemy ten parametr) jest równy image. Oznacza to, że jeśli obrazek jest większy niż boks elementu, rozciągnięty zostanie on aż pokryje się wymiarami z obrazkiem.

Wartość crop spowoduje, że kawałki obrazka wystające poza krawędzie elementu będą przycięte. Najczęściej używana wartość. Pamiętajmy, że obrazka nałożonego na tło za pomocą filtru nie da się wypozycjonować, na przykład od prawej, dlatego należy go przygotować od razu w odpowiedniej wielkości, nawet jeśli 50% szerokości marnuje się na pustą przestrzeń.

Przykład z obrazkiem nałożonym na kolorowy top strony (oczywiście dobre przeglądarki dostają wersję bez filtrów).

Wartość scale rozciągnie obrazek, tak aby wypełnił całą dostępną przestrzeń. Pierwsze zastosowanie - jednolite przezroczyste tła, uzyskiwane normalnie przez ustawienie zwykłego obrazka PNG i background-repeat: repeat. Drugim zastosowaniem mogą być gradienty, jeśli ustawimy sztywno wysokość albo szerokość boksu i przygotujemy obrazek o takich wymiarach.

Przykład z gradientem poziomym (oczywiście dobre przeglądarki dostają wersję bez filtrów).

img

Ten sam filtr może zostać zaaplikowany dla zwyczajnego obrazka umieszczonego w kodzie strony za pomocą znacznika img.

SizingMethod powinien być ustawiony na scale. Jeśli nie chcemy ustawiać filtra ręcznie w kodzie, a plik CSS odpada, gdyż zależy nam tylko na plikach PNG (także przekazanie src do CSS nawet w expressions jest problematyczne), możemy skorzystać z pliku zachowania dla Explorera.

Pliki HTC Behavior, obok expressions, są ciekawym rozszerzeniem dla IE, pozwalającym odpalać skrypty modyfikujące stronę. Dzięki nim możliwe jest na przykład uzyskanie stanu :hover albo właśnie poprawka do wyświetlania przezroczystych obrazków.

Plik taki wywołujemy następująco:

  1. img {
  2. behavior: url(pngopacity.htc);
  3. }

Mankament takiego rozwiązania jest jeden - musimy podawać wymiary obrazków, czy to w CSS czy w kodzie HTML. 3 Demo

Pamiętajmy o prawidłowych ścieżkach względem strony a nie pliku CSS oraz odpowiednim typie plików .htc na serwerze - text/x-compontent.

Zakończenie

Tym oto artykułem przedstawiłem praktyczne możliwości związane z przezroczystością i wyjaśniłem jak radzić sobie z problemami w Internet Explorerze. Mam nadzieję, że dzięki niemu więcej webdesignerów sięgnie po ten efekt, serwując lżejsze strony użytkownikom.

Należy jednak pamiętać o starej maksymie co za dużo to niezdrowo - nałożenie warstwowo paru teł PNG potrafi znacznie spowolnić przeglądarkę podczas przewijania, a nawet ją zawiesić.


  1. Więcej informacji o hasLayout w moim artykule hasLayout i jego implikacje
  2. Opis poprawek PNG w artykule Kornela Lesińskiego: PNG Howto
  3. Skrypt PHP wykonujący za nas całą robotę: Fixed display of PNG Alpha Transparency

Piotr Petrus


Przykłady przedstawione w artykule


O autorze

Piotr Petrus

Piotr Petrus

Jest projektantem stron internetowych i twórcą artykułów o standardach sieciowych. Freelancer, miłośnik muzyki, pisze także na swoim blogu na tematy pokrywające się z jego pasjami. Uwielbia grzebać do rana w rzeczach, które wszystkim wokoło wydają się stratą czasu - on to jednak kocha.