Grafické CSS filtry v IE 4 a 5

Internet Explorer od verze 4 umí určitým způsobem změnit vzhled obrázku. Říká se tomu filtry. Můžete se podívat na stránku s příklady.

Zatím jsem nikde na Internetu neviděl, že by je někdo používal (psáno v roce 1999). Jedinou zmínku o nich jsem našel úplně dole na jedné stránce Jiřího Koska, kde má naštěstí v tabulce i jejich kompletní popis. Nemá tam ale popsán způsob jejich zápisu do HTML, na ten jsem musel přijít sám. Jinak jsem o tom vůbec nikde nic nenašel a že jsem hledal!

Zápis filtrů

Filtry se podle mojí zkušenosti dají aplikovat pouze na obrázky a rozměrované elementy (nejlépe element DIV s udanou výškou, nebo šířkou).

Filtry patří do CSS stylů, proto se tak i zapisují. Například převedení obrázku na černobílý se zapíše takto:

Pokud má filter nějaké parametry, zapisují se za něj do závorky oddělené čárkami tímto způsobem:

zprůhlední obrázek na polovinu a ještě ho zaoblí (zaoblení je ta dvojka). Je nutné uvést rozměr (např. width, aby se to vůbec vykreslilo (pro Internet Explorer 6 není nutno rozměry zadávat).

K čemu to je

Je to jenom taková legrácka. Ale někdy to může ušetřit přenosové kapacity a zlepšit design stránek. Zajímavý efekt lze docílit u obrázkových odkazů v kombinaci s pseudotřídou a:hover. (Příklad mám na stránce o odkazech.) Hezké jsou průhledné věci, dají se tím také skrýt okraje obrázků.

Pozor! Filtry jsou trochu náročné na počítač klienta. Zobrazují se relativně pomalu (na pomalejších počítačích dokonce doslova dlouho; nemá to nic společného s propustností linek). (Je dobré vázat je na uživatelské skripty, aby nezdržovaly při prvním načítání.) Naštěstí se na pomalejších počítačích vyskytují většinou starší prohlížeče, které filtry ignorují, takže se s nimi nezdržují.

Není třeba se nijak obávat, že by neznalost nějakého filtru dělala prohlížeči potíže, jako to třeba dělají scripty. Nemám rád hlášky typu "script nefunguje" apod., ale u filtrů to nastat nemůže, právě protože patří do CSS.

Některé filtry se vám nezobrazí u neprůhledných obrázků (klasicky jpg). Je to proto, že prohlížeč nemá žádné volné nebo průhledné místo, kam by mohl efekty vykreslovat. Třeba stín. Tam je lépe obrázek uzavřít do tabulky a filtr aplikovat na buňku (tak to dělám v příkladech).

Podpora

Internet Explorer od 4. verze výše. Verze prohlížeče se v podpoře filtrů mírně liší, to se musí zkoušet. Ovšem na některých instalacích filtry ze záhadných důvodů nefungují vůbec. Mozilla ani Netscape filtry rozhodně nepodporují, nepatří to ani do standardu CSS.

Zjistil jsem, že Intetrnet Explorer 5 dělá ve filtrech čmouhy u objektů širších než 512 pixelů. Průhlednost se dá udělat i v Mozille css vlastností -moz-opacity: 50% (100% je neprůhlednost).

Přehled filtrů

Filtry a jejich parametry
Filtr	Popis	Parametry
Alpha	Míra průhlednosti objektu. Lze vytvářet i transparentní přechody (gradienty).	`Opacity=číslo` Průhlednost (0 = úplně průhledná, 100 = neprůhledná). `FinishOpacity=číslo` Průhlednost (0--100). `Style=číslo` Určení tvaru transparentního přechodu: 0 (jednotný), 1 (lineární), 2 (radiální) a 3 (obdélníkový). `StartX=x` Souřadnice `x` začátku přechodu. `StartY=y` Souřadnice `y` začátku přechodu. `FinishX=x` Souřadnice `x` konce přechodu. `FinishY=y` Souřadnice `y` konce přechodu.
Blur	Vytvoří efekt objektu pohybujícího se vysokou rychlostí jeho rozmazáním v jednom směru.	`Add=boolean` 1 = do rozmazaného obrázku se přidá i původní obrázek; 0 = výsledek se nebude kombinovat s originálním obrázkem. `Direction=úhel` Úhel, kterým bude směrovat šmouha. Úhel se zadává ve stupních a možné jsou pouze násobky 45°. `Strength=číslo` Síla rozmazání.
Chroma	Určitou barvu objektu vykreslí jako průhlednou.	`Color=barva` Barva, která bude transparentní. Udává se ve tvaru `#RRGGBB`.
DropShadow	Filtr vytvoří k objektu stín a tím i zdánlivý efekt, že se objekt vznáší nad stránkou.	`Color=barva` Barva stínu ve tvaru `#RRGGBB`. `OffX=číslo` Posunutí stínu oproti originálnímu objektu ve směru osy `x`. `OffY=číslo` Posunutí stínu oproti originálnímu objektu ve směru osy `y`. `Positive=boolean` 1 = stín je proveden pouze pro netransparentní části objektu; 0 = stín je vytvořen pro všechny body obrázku.
FlipH	Horizontálně převrátí objekt.
FlipV	Vertikálně převrátí objekt.
Glow	Vytvoří dojem, že objekt svítí tím, že specifikovanou barvou obkreslí okraje objektu.	`Color=barva` Barva obrysu ve tvaru `#RRGGBB`. `Strength=číslo` Intenzita obrysu (1--255).
Gray	Všechny barvy v objektu převede na odstíny šedi.
Invert	Provede inverzi hodnot jasu, sytosti a světlosti v objektu.
Light	Simuluje efekt nasvícení objektu světelným zdrojem.	Světelné zdroje se přidávají pomocí metod, nelze je nastavit jako parametry.
Mask	Vytvoří z objektu transparentní masku.	`Color=barva` Barva, kterou se vykreslí původně transparentí části objektu. Opět ve tvaru `#RRGGBB`.
Shadow	Vytvoří k objektu jeho stín.	`Color=barva` Barva stínu zadaná ve tvaru `#RRGGBB`. `Direction=úhel` Úhel, kterým bude směrovat stín. Úhel se zadává ve stupních a možné jsou pouze násobky 45°.
Wave	Zdeformuje objekt do tvaru sinusoidy.	`Add=boolean` 1 = do zvlněného obrázku se přidá i původní obrázek; 0 = výsledek se nebude kombinovat s originálním obrázkem. `Freq=číslo` Počet vln v deformaci. `Light=číslo` Světelná intenzita vlny (0--100). `Phase=číslo` Fázové posunutí začátku vlny. Udává se od 0 do 100 jako procento z jednoho úplného průběhu sinusoidy. `Strength=číslo` Intenzita efektu.
XRay	Barevnou hloubku objektu sníží na 1 -- tj. vytvoří černobílý obrázek, který zachycuje obrysy v původním objektu.

Filtry a jejich parametry

Filtr

Popis

Parametry

Alpha

Míra průhlednosti objektu. Lze vytvářet i transparentní přechody (gradienty).

Opacity=číslo: Průhlednost (0 = úplně průhledná, 100 = neprůhledná).
FinishOpacity=číslo: Průhlednost (0--100).
Style=číslo: Určení tvaru transparentního přechodu: 0 (jednotný), 1 (lineární), 2 (radiální) a 3 (obdélníkový).
StartX=x: Souřadnice x začátku přechodu.
StartY=y: Souřadnice y začátku přechodu.
FinishX=x: Souřadnice x konce přechodu.
FinishY=y: Souřadnice y konce přechodu.

Blur

Vytvoří efekt objektu pohybujícího se vysokou rychlostí jeho rozmazáním v jednom směru.

Add=boolean: 1 = do rozmazaného obrázku se přidá i původní obrázek;
0 = výsledek se nebude kombinovat s originálním obrázkem.
Direction=úhel: Úhel, kterým bude směrovat šmouha. Úhel se zadává ve stupních a možné jsou pouze násobky 45°.
Strength=číslo: Síla rozmazání.

Chroma

Určitou barvu objektu vykreslí jako průhlednou.

Color=barva: Barva, která bude transparentní. Udává se ve tvaru #RRGGBB.

DropShadow

Filtr vytvoří k objektu stín a tím i zdánlivý efekt, že se objekt vznáší nad stránkou.

Color=barva: Barva stínu ve tvaru #RRGGBB.
OffX=číslo: Posunutí stínu oproti originálnímu objektu ve směru osy x.
OffY=číslo: Posunutí stínu oproti originálnímu objektu ve směru osy y.
Positive=boolean: 1 = stín je proveden pouze pro netransparentní části objektu;
0 = stín je vytvořen pro všechny body obrázku.

FlipH

Horizontálně převrátí objekt.

FlipV

Vertikálně převrátí objekt.

Glow

Vytvoří dojem, že objekt svítí tím, že specifikovanou barvou obkreslí okraje objektu.

Color=barva: Barva obrysu ve tvaru #RRGGBB.
Strength=číslo: Intenzita obrysu (1--255).

Gray

Všechny barvy v objektu převede na odstíny šedi.

Invert

Provede inverzi hodnot jasu, sytosti a světlosti v objektu.

Light

Simuluje efekt nasvícení objektu světelným zdrojem.

Světelné zdroje se přidávají pomocí metod, nelze je nastavit jako parametry.

Mask

Vytvoří z objektu transparentní masku.

Color=barva: Barva, kterou se vykreslí původně transparentí části objektu. Opět ve tvaru #RRGGBB.

Shadow

Vytvoří k objektu jeho stín.

Color=barva: Barva stínu zadaná ve tvaru #RRGGBB.
Direction=úhel: Úhel, kterým bude směrovat stín. Úhel se zadává ve stupních a možné jsou pouze násobky 45°.

Wave

Zdeformuje objekt do tvaru sinusoidy.

Add=boolean: 1 = do zvlněného obrázku se přidá i původní obrázek;
0 = výsledek se nebude kombinovat s originálním obrázkem.
Freq=číslo: Počet vln v deformaci.
Light=číslo: Světelná intenzita vlny (0--100).
Phase=číslo: Fázové posunutí začátku vlny. Udává se od 0 do 100 jako procento z jednoho úplného průběhu sinusoidy.
Strength=číslo: Intenzita efektu.

XRay

Barevnou hloubku objektu sníží na 1 -- tj. vytvoří černobílý obrázek, který zachycuje obrysy v původním objektu.

Píše Yuhů
dusan@pc-slany.cz

O tvorbě, údržbě a zlepšování internetových stránek.

Základy HTML CSS FrontPage JavaScript

Jak psát web: http://dusan.pc-slany.cz/internet/

Píše Yuhů: autorova stránka, mail: dusan@pc-slany.cz

Poslední aktualizace 08.01.2003

Grafické filtry v IE 4.x

Zápis filtrů

K čemu to je

Podpora

Přehled filtrů