Filtry

W tym rozdziale dowiesz się...

• W jaki sposób wprowadzić efekty specjalne na stronie WWW, w postaci efektownych filtrów graficznych?
• Co zrobić, aby dowolny element strony był półprzezroczysty?
• W jaki sposób rozmyć obrazek, tworząc efekt smugi?
• Co zrobić, aby wybrany kolor na obrazku stał się przezroczysty?
• Jak dodać cień pod tekstem?
• W jaki sposób stworzyć lustrzane odbicie obrazu lub innego elementu strony?
• W jaki sposób stworzyć jarzący się tekst?
• Jak przekształcić kolorowe zdjęcie (obrazek, grafikę) na czarno-białą fotografię?
• Jak stworzyć negatyw zdjęcia (fotografii)?
• W jaki sposób odwrócić przezroczystość obrazu (grafiki)?
• Jak dodać efektowny cień pod tekstem?
• W jaki sposób pofalować zdjęcie (grafikę, obrazek)?
• Jak zmienić zdjęcie, aby wyglądało jak na prześwietleniu rentgenowskim?
• Jak wprowadzić efektowne oświetlenie zdjęcia (obrazka, grafiki) za pomocą światła otaczającego, stożkowego lub punktowego?
• Jak połączyć kilka efektów specjalnych, aby otrzymać bardziej efektowny filtr graficzny?

Wstęp

(tylko Internet Explorer 4.0 lub nowszy!)

UWAGA! Polecenia zawarte w tym rozdziale nie wchodzą w skład specyfikacji stylów CSS 2 i są wyłącznie rozszerzeniem przeglądarki Internet Explorer 4.0 lub nowszej!

Intertet Explorer pozwala wprowadzić na stronę efektowne filtry graficzne. Dzięki nim możemy tak przekształcić zwykły tekst, aby wyglądał on na obrazek. Możemy również zastosować wiele ciekawych efektów do obrazków. Są one podobne do tych, które występują w programach graficznych do obróbki zdjęć. Wszystko to spowoduje, że nasza strona może wyglądać dużo lepiej.

Według Microsoftu filtry graficzne mogą zostać bezpośrednio zastosowane tylko do znaczników:

• BODY - ciało dokumentu
• BUTTON - przycisk
• IMG - obrazek
• INPUT - pole formularza
• MARQUEE - animowany tekst
• TABLE - tabela
• TD - komórka tabeli
• TEXTAREA - wieloliniowe pole tekstowe
• TFOOT - stopka tabeli
• TH - komórka nagłówkowa tabeli
• THEAD - nagłówek tabeli
• TR - wiersz tabeli

Natomiast jeśli chcemy zastosować je do innych znaczników (np. zwykłego tekstu), należy poprzez własności stylów obowiązkowo określić:

• ich wysokość lub/i szerokość, np. height: 1em (uwaga: niektóre efekty zajmują więcej miejsca niż jedną wysokość linii, czyli więcej niż 1em)
• albo ewentualnie pozycjonowanie absolutne (wystarczy podać position: absolute bez określania dokładnej pozycji)

Składnia każdego efektu jest następująca:

selektor { filter: NazwaEfektu(Parametr1=wartość, Parametr2=wartość...) }

Nie jest konieczne wpisywanie wszystkich parametrów, można nawet nie wpisywać żadnych, zostaną wtedy przyjęte domyślne ich wartości. Kolejność wpisywania także nie ma znaczenia. Jeśli nie podajemy żadnych parametrów, nawiasy w poleceniu również są zbędnie, tzn. wystarczy wtedy wpisać: selektor { filter: NazwaEfektu }. Poza tym niektóre efekty nie mają określonych parametrów, co oznacza, że zawsze działają tak samo.

Przezroczystość

selektor { filter: Alpha(Opacity=nieprzezroczystość, FinishOpacity=koniec, Style=styl, StartX=xp, StartY=yp, FinishX=xk, FinishY=yk) }

Przykład:

filter: Alpha(Opacity=50, Style=0)
filter: Alpha(Style=1)
filter: Alpha(Style=2)
filter: Alpha(Style=3)

height: 1em; filter: Alpha(Opacity=50)

Poniżej interesujący efekt z użyciem pozycjonowania:

Tekst przykryty półprzezroczystym obrazkiem

Dynamiczna zmiana filtrów graficznych

Oto ciekawy przykład dynamicznej zmiany filtru graficznego za pomocą DHTML (wskaż poniższy obrazek myszką):

Aby uzyskać taki efekt, należy wpisać:

<img src="obrazek.jpg" alt="..." style="filter: alpha(opacity=50)" onmouseover="this.style.filter=''" onmouseout="this.style.filter='alpha(opacity=50)'" />

Możliwa jest również kolejność odwrotna:

<img src="obrazek.jpg" alt="..." onmouseover="this.style.filter='alpha(opacity=50)'" onmouseout="this.style.filter=''" />

Atrybut style="filter: ..." określa początkowe ustawienie filtru; onmouseover="this.style.filter='...'" podaje zmianę po wskazaniu myszką; natomiast onmouseout="this.style.filter='...'" wywołuje powrót do ustawień początkowych po usunięciu wskaźnika myszy znad elementu [zobacz także: Zdarzenia].

Identyczna składnia obowiązuje dla pozostałych filtrów, przedstawionych na tej stronie. W ten sam sposób można również dynamicznie zmieniać inne deklaracje stylów - wtedy zamiast this.style.filter wpisujemy: this.style.cecha, gdzie cecha określa wybraną własność stylów, a po znaku równości (pomiędzy apostrofami) wpisujemy żądaną wartość atrybutu, np. this.style.color='red'
UWAGA! Dotyczy to MSIE 4.0+

Rozmazanie

selektor { filter: Blur(Add=typ, Direction=kierunek, Strength=natężenie) }

UWAGA! W Internet Explorerze 6 intensywność rozmazywania jest ogólnie większa niż w MSIE 5.

Przykład:

Blur(Add=0, Direction=45, Strength=10)

height: 1em; filter: Blur

Selektywna przezroczystość

selektor { filter: Chroma(Color=kolor) }

UWAGA! Polecenie nie działa z obrazkami, które nie obsługują przezroczystości (np. *.jpg). Przezroczystość obsługuje format *.gif.

Przykład:

Cień

selektor { filter: DropShadow(Color=kolor, OffX=x, OffY=y, Positive=typ) }

UWAGA! Parametr Positive=0 w MSIE 5 jest wyświetlany odmiennie (błędnie) jak w MSIE 6.

Przykład:

height: 1.5em; filter: DropShadow(Color=yellow, Positive=1)

height: 1.5em; filter: DropShadow(Color=yellow, Positive=0)

Lustro

1. Poziome:

   selektor { filter: FlipH }

2. Pionowe:

   selektor { filter: FlipV }

Przykład:

height: 1em; filter: FlipH

height: 1em; filter: FlipV

Jarzenie

selektor { filter: Glow(Color=kolor, Strength=natężenie) }

Przykład:

height: 1.5em; filter: Glow(Color=yellow)

Skala szarości

selektor { filter: Gray }

Przykład:

Zwykły obrazek
filter: Gray

Negatyw

selektor { filter: Invert }

Przykład:

Maska

selektor { filter: Mask(Color=kolor) }

Zmienia kolor przezroczystości na wskazany, natomiast wszystkie inne kolory stają się przezroczyste.

UWAGA! Polecenia działa tylko z obrazkami, na których został zaznaczony kolor przezroczysty. Przezroczystość obsługuje format *.gif (ale nie *.jpg).

Przykład:

Zwykły obrazek *.gif z przezroczystością
Mask(Color=red)

Rozmyty cień

selektor { filter: Shadow(Color=kolor, Direction=kierunek) }

Przykład:

height: 1.5em; filter: Shadow(Color=yellow, Direction=135)

Fala

selektor { filter: Wave(Add=typ, Freq=częstotliwość, LightStrength=światło, Phase=faza, Strength=natężenie) }

Przykład:

Wave(Add=1, Freq=5, LightStrength=0, Strength=15)
Wave(Add=0, Freq=5, LightStrength=50, Strength=15)

height: 1em; filter: Wave(Freq=2, Strength=2)

Prześwietlenie

selektor { filter: Xray }

Zmienia głębię kolorów i wyświetla element jako czarno-biały (jak na prześwietleniu rentgenowskim).

Przykład:

Światło

UWAGA! W poleceniach dotyczących światła nie można pomijać parametrów, ani zmieniać ich kolejności wpisywania!

1. Otaczające:

   <img id="identyfikator" style="filter: Light" src="lokalizacja obrazka" alt="..." />
   <script type="text/jscript">
   // <![CDATA[
   var ms = navigator.appVersion.indexOf("MSIE");
   if (ms > 0 && parseInt(navigator.appVersion.substring(ms + 5, ms + 6)) >= 4)
   document.all.identyfikator.filters.Light.addAmbient(R,G,B, natężenie);
   // ]]>
   </script>

   gdzie:

   identyfikator

   Unikatowa nazwa elementu, która nie może się powtórzyć w tym samym dokumencie. Może składać się tylko z liter, cyfr oraz znaków podkreślnika ("_"), ale nie może rozpoczynać się cyfrą!

   lokalizacja obrazka

   Lokalizacja na dysku, gdzie znajduje się żądany obrazek

   R, G, B

   Składowe czerwona, zielona, niebieska koloru światła (liczby od 0 do 255) [zobacz: Kolory]

   natężenie

   Intensywność

   Przykład:

   
2. Stożkowe:

   <img id="identyfikator" style="filter: Light" src="lokalizacja obrazka" alt="..." />
   <script type="text/jscript">
   // <![CDATA[
   var ms = navigator.appVersion.indexOf("MSIE");
   if (ms > 0 && parseInt(navigator.appVersion.substring(ms + 5, ms + 6)) >= 4)
   document.all.identyfikator.filters.Light.addCone(xp,yp,zp, xk,yk, R,G,B, natężenie, rozproszenie);
   // ]]>
   </script>

   gdzie:

   identyfikator

   Unikatowa nazwa elementu, która nie może się powtórzyć w tym samym dokumencie. Może składać się tylko z liter, cyfr oraz znaków podkreślnika ("_"), ale nie może rozpoczynać się cyfrą!

   lokalizacja obrazka

   Lokalizacja na dysku, gdzie znajduje się żądany obrazek

   xp, yp, zp

   Położenie w przestrzeni źródła światła - współrzędna pozioma, pionowa i wysokość nad obrazkiem

   xk, yk

   Położenie na płaszczyźnie obrazka punktu oświetlanego (zogniskowania)

   R, G, B

   Składowe czerwona, zielona, niebieska koloru światła (liczby od 0 do 255) [zobacz: Kolory]

   natężenie

   Intensywność

   rozproszenie

   Kąt rozproszenia ("rozrzutu") światła w stopniach (od 0 do 90)

   Przykład:

   
3. Punktowe:

   <img id="identyfikator" style="filter: Light" src="lokalizacja obrazka" alt="..." />
   <script type="text/jscript">
   // <![CDATA[
   var ms = navigator.appVersion.indexOf("MSIE");
   if (ms > 0 && parseInt(navigator.appVersion.substring(ms + 5, ms + 6)) >= 4)
   document.all.identyfikator.filters.Light.addPoint(x,y,z, R,G,B, natężenie);
   // ]]>
   </script>

   gdzie:

   identyfikator

   Unikatowa nazwa elementu, która nie może się powtórzyć w tym samym dokumencie. Może składać się tylko z liter, cyfr oraz znaków podkreślnika ("_"), ale nie może rozpoczynać się cyfrą!

   lokalizacja obrazka

   Lokalizacja na dysku, gdzie znajduje się żądany obrazek

   x, y, z

   Położenie w przestrzeni źródła światła - współrzędna pozioma, pionowa i wysokość nad obrazkiem

   R, G, B

   Składowe czerwona, zielona, niebieska koloru światła (liczby od 0 do 255) [zobacz: Kolory]

   natężenie

   Intensywność

   Przykład:

   

Wykorzystując Dynamiczny HTML (DHTML), można stworzyć nawet takie "cuda"!

Łączenie efektów

selektor { filter: Efekt1 Efekt2... }

Wszystkie powyższe filtry można ze sobą łączyć, stosując je do tego samego elementu. Dzięki temu uzyskamy jeszcze ciekawszy efekt.

Uwaga! Kolejność wpisywania efektów w poleceniu zwykle ma znaczenie na końcowy wygląd elementu.

Przykład:

height: 2em; filter: Wave(Strength=2) Glow Shadow

• Suwaki
• Układ wielokolumnowy

• Do góry
• Strona główna