Grafické filtry v IE 4.x

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 (kromě mě, ovšem). 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é oddíly (element DIV se stylově udanou výškou, nebo šířkou). 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 filter: alpha(opacity=50, style=2)zprůhlední obrázek na polovinu a ještě ho zaoblí (zaoblení je ta dvojka).

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 (obzvlášť LIGHT je bomba!). 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 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é scripty, 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.)

Přehled filtrů

  (Bez dovolení kopíruji od Jiřího Koska.)

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.

Maximální šířka

Zjistil jsem, že Intetrnet Explorer 5 dělá ve filtrech čmouhy u objektů širších než 512 pixelů. 

 Navštivte stránku s příklady!
Vizte též: úvod do CSS, obrázky na webu, zdokonalení odkazů

Píše Yuhů
dusan@pc-slany.cz
mail formulářem
Jak psát web O tvorbě, údržbě a zlepšování internetových stránek.

Základy HTML CSS FrontPage Hledání

Obsah

Hlavní stránka

Novinky

Download

Zdroje

Hledání


Rozšířené

Základní kurs

Jak udělat stránku

Základy HTML

Publikování

Zásady psaní

Editory

Různé prohlížeče

Editory

FrontPage 2000

FP Editor 98

Word 97

FrontPage Express

HTML tipy

Příprava obrázků

Obrázky

Odkazy

Vychytávky odkazů

Záložky

Aktivní mail

Tabulky

Úprava tabulek

Novinky tabulek

Design tabulkami

Rámy

Formátování rámů

Rámy nepoužívat

Iframe

Formuláře

Formuláře v HTML

Zápis barev

Seznam definic

Formátovací chyby

Provoz webu

Vzdálené služby

Vyhledávače

Katalogy

Správa souborů

Obsah / forma

Čeština

Meta tagy

Nastavení serveru

Používání prohlížeče

CSS styly

CSS styly

Úvod do CSS

Struktura textu

CSS prakticky

Přehled vlastností

Složitější deklarace

Délkové jednotky

Pozicování

Sloupce pozicováním

Okraje objektů

Odlišení prohlížečů

Omezení CSS

Odlišný tisk

Dynamické HTML

Filtry

Příklady filtrů

Různé barvy odkazů

Barva rolovací lišty

 


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

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

Sláva kočkám! Poslední aktualizace 22.04.2001