Grafické filtry v IE

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.

Zápis filtrů - K čemu to je - Podpora - Přehled filtrů

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:

<img src="obrázek.gif" style="filter: XRay"> .

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

filter: jméno(parametr=hodnota, jiný_parametr=hodnota),

například 

div {filter: alpha(opacity=50, style=2); width: 50px} 

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:0.5 (1 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).

Vizte též průhlednost pro Mozillu

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 svislé sinusoidy (jako liána).
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 Není mi přesně jasné, co se s obrázkem děje. Vypadá jakoby "zrentgenovaný". Občas se uvádí, že xray() sníží barevnou hloubku obrázku na dvě barvy, ale není tomu tak.

Existují i další hodnoty. Např. progid:DXImageTransform.Microsoft.AlphaImageLoader() přidává podporu poloprůhlednosti PNG obrázku v Exploreru. Více informací a příklad mám někde dole na stránce o vlastnosti Filter.

 

Reklama

www.webhosting-c4.cz, extra rychlý SSD webhosting s doménou v ceně
o tvorbě, údržbě a zlepšování internetových stránek

Návody HTML CSS JavaScript Články Ostatní

CSS kurz Přehled hodnot Vlastnosti CSS příklady

Jak psát web píše Yuhů, Dušan Janovský. Kontakt.