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 (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.)

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

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.

GrafickΘ filtry v IE 4.x

Zßpis filtr∙

K Φemu to je

P°ehled filtr∙

Maximßlnφ ╣φ°ka