Kurs HTML - style (filtry graficzne)










SPIS TREŚCI


Wstęp  - 
Przezroczystość  - 
Rozmazanie  - 
Selektywna przezroczystość  - 
Cień  - 
Lustro  - 
Jarzenie  - 
Skala szarości  - 
Negatyw  - 
Maska  - 
Rozmyty cień  - 
Fala  - 
Prześwietlenie  - 
Światło  - 
Łączenie efektów


Filtry graficzne




WSTĘP
(tylko Internet Explorer 4.0 lub nowszy!)

UWAGA! Polecenia zawarte na tej stronie, nie wchodzą w skład specyfikacji stylów CSS2
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.


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ść...) }

gdzie SELEKTOR jest jednym z opisanych powyżej znaczników
[zobacz także: Wstawianie stylów],
NazwaEfektu określa o jaki filtr nam chodzi,
Parametr1, Parametr2 oznaczają własności efektu,
a wartość jest określoną wartością dla każdego parametru.


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) }

gdzie SELEKTOR oznacza "specyficzny" znacznik (koniecznie zobacz: Wstęp).
Natomiast inne wyrazy oznaczają:

nieprzezroczystość - poziom nieprzezroczystości (0 - przezroczysty; 100 - nieprzezroczysty - domyślnie)
koniec - (opcjonalnie) przezroczystość końcowa (0 - przezroczysty, 100 - nieprzezroczysty)
styl - charakterystyczny kształt przezroczystości:

0 - jednolity (domyślnie)
1 - liniowy
2 - promieniowy
3 - prostokątny

xp, yp - współrzędna pozioma i pionowa początku obszaru przezroczystości
xk, yk - współrzędna pozioma i pionowa końca przezroczystości


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




A 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" 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" 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 IE4.0+




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

gdzie SELEKTOR oznacza "specyficzny" znacznik (koniecznie zobacz: Wstęp).
Natomiast inne wyrazy oznaczają:

typ - określa, czy oryginalny obraz ma zostać dodany do filtru:

1 - obraz zostanie dodany (domyślnie)
0 - obraz nie zostanie dodany

kierunek - kierunek rozmazania w stopniach (zgodnie z ruchem wskazówek zegara względem pionu):

0 - góra
45 - góra, prawo
90 - prawo
135 - dół, prawo
180 - dół
225 - dół, lewo
270 - lewo (domyślnie)
315 - góra, lewo

natężenie - ilość rozmazanych pikseli



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

Przykład:

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

height: 1em; filter: Blur



SELEKTYWNA PRZEZROCZYSTOŚĆ
SELEKTOR { filter: Chroma(Color=kolor) }

gdzie SELEKTOR oznacza "specyficzny" znacznik (koniecznie zobacz: Wstęp).
Natomiast kolor oznacza definicję koloru który ma stać się przezroczysty.



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

Przykład:
Zwykły obrazek *.gif
Chroma(Color=white)




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

gdzie SELEKTOR oznacza "specyficzny" znacznik (koniecznie zobacz: Wstęp).
Natomiast inne wyrazy oznaczają:

kolor - definicja koloru cienia
x - liczba pikseli o które zostanie przesunięty cień w poziomie (wartości dodatnie przesuwają w prawo, ujemne - w lewo)
y - liczba pikseli o które zostanie przesunięty cień w pionie (wartości dodatnie przesuwają w dół, ujemne - w górę)
typ - sposób tworzenia cienia

1 - cień będzie tworzony z kolorów elementu, które nie są przezroczyste (domyślnie)
0 - cień będzie tworzony z koloru przezroczystego




UWAGA! Parametr positive=0 w IE5 jest wyświetlany odmiennie (błędnie) jak w IE6.

Przykład:
height: 1.5em; filter: DropShadow(Color=yellow, positive=1)
height: 1.5em; filter: DropShadow(Color=yellow, positive=0)



LUSTRO

Poziome:
SELEKTOR { filter: FlipH }
Pionowe:
SELEKTOR { filter: FlipV }


gdzie SELEKTOR oznacza "specyficzny" znacznik (koniecznie zobacz: Wstęp).


Przykład:
height: 1em; filter: FlipH
height: 1em; filter: FlipV



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

gdzie SELEKTOR oznacza "specyficzny" znacznik (koniecznie zobacz: Wstęp).
Natomiast inne wyrazy oznaczają:

kolor - definicja koloru jarzenia
natężenie - Intensywność efektu (od 0 do 255)


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



SKALA SZAROŚCI
SELEKTOR { filter: Gray }

gdzie SELEKTOR oznacza "specyficzny" znacznik (koniecznie zobacz: Wstęp).


Przykład:
Zwykły obrazek
filter: Gray




NEGATYW
SELEKTOR { filter: Invert }

gdzie SELEKTOR oznacza "specyficzny" znacznik (koniecznie zobacz: Wstęp).


Przykład:





MASKA
SELEKTOR { filter: Mask(Color=kolor) }

gdzie SELEKTOR oznacza "specyficzny" znacznik (koniecznie zobacz: Wstęp).
Natomiast kolor oznacza definicję koloru maski.



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) }

gdzie SELEKTOR oznacza "specyficzny" znacznik (koniecznie zobacz: Wstęp).
Natomiast inne wyrazy oznaczają:

kolor - definicja koloru cienia
kierunek - kierunek cienia w stopniach (zgodnie z ruchem wskazówek zegara względem pionu):

0 - góra
45 - góra, prawo
90 - prawo
135 - dół, prawo
180 - dół
225 - dół, lewo (domyślnie)
270 - lewo
315 - góra, lewo



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) }

gdzie SELEKTOR oznacza "specyficzny" znacznik (koniecznie zobacz: Wstęp).
Natomiast inne wyrazy oznaczają:

typ - określa, czy oryginalny obraz ma zostać dodany do filtru:

1 - obraz zostanie dodany
0 - obraz nie zostanie dodany (domyślnie)

częstotliwość - liczba fal
światło - natężenie światła (od 0 do 100)
faza - przesunięcie fazowe początku fali (od 0 do 100)
natężenie - Intensywność efektu


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 }

gdzie SELEKTOR oznacza "specyficzny" znacznik (koniecznie zobacz: Wstęp).



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!



Otaczające:
<IMG ID="identyfikator" style="filter: Light" SRC="lokalizacja obrazka">
<SCRIPT TYPE="text/jscript" LANGUAGE="JScript">
<!--
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:






Stożkowe:
<IMG ID="identyfikator" style="filter: Light" SRC="lokalizacja obrazka">
<SCRIPT TYPE="text/jscript" LANGUAGE="JScript">
<!--
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:






Punktowe:
<IMG ID="identyfikator" style="filter: Light" SRC="lokalizacja obrazka">
<SCRIPT TYPE="text/jscript" LANGUAGE="JScript">
<!--
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... }

gdzie SELEKTOR oznacza "specyficzny" znacznik (koniecznie zobacz: Wstęp).
Natomiast wyrazy: EFEKT1, EFEKT2 oznaczają przedstawione powyżej filtry graficzne.



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