P°φklady filtr∙

U╛ jste Φetli popis syntaxe filtr∙ s p°ehledem hodnot?

Pr∙hlednost - Rozmazßnφ - Zpr∙hledn∞nφ barvy - Stφny - P°evracenφ - Obsvφcenφ - ╚ernobφlost - Negativ - Maska - Vlna

Trp∞livost, prosφm

Tato strßnka se zobrazuje a p°ekresluje velmi pomalu. Ne snad, ╛e by byla p°φli╣ velkß, ale obsahuje extrΘmnφ mno╛stvφ element∙, ve kter²ch musφ procesor p°epoΦφtßvat grafiku. Mimochodem, prßv∞ tφm je zajφmavß.

Mßte Explorer 4?

Tuto strßnku mß smyls prohlφ╛et pouze v Microsoft Internet Exploreru 4.x nebo nov∞j╣φm prohlφ╛eΦi, kter² filtry podporuje. IE 3 ani Netscape 4 to neum∞jφ. Neberte to tak, ╛e bych preferoval Microsoft! Jen se prost∞ zmi≥uji o v∞ci, kterß se nßhodou t²kß zatφm jen MSIE 4 a 5.

Konstrukce p°φklad∙

Pou╛φvßm jedin² obrßzek kote.gif (60 ╫ 60 pr∙hledn² gif), kter² mßm umφst∞n² v bu≥ce tabulky. Styl filtru aplikuji a╛ na bu≥ku a tent²╛ filtr na sousednφ bu≥ku s textem. Bu≥ka je o 20 pixel∙ ╣ir╣φ, proto se grafick² efekt dostane mφsty i mimo obrßzek, co╛ jinak ud∞lat nelze (prost∞ to jinak neumφm). TakΘ obΦas kv∙li tomu nenφ efekt symetrick². V dal╣φ bu≥ce mßm napsßno "Ko╗ßtko", aby bylo vid∞t, jak filtr p∙sobφ na text. Tento text musφ b²t v elementu, kter² mß pevnΘ rozm∞ry (nap°. tedy v bu≥ce), na voln² text se filtr aplikovat nebude. Bu≥kßm tabulky je p°i°azen p°esn∞ ten styl, kter² je vypsan² ve t°etφm sloupeΦku.

Alpha -- Pr∙hlednost

	Ko╗ßtko	{ filter: alpha(opacity=20) }
	Ko╗ßtko	{ filter: alpha(opacity=50) }
	Ko╗ßtko	{filter: alpha(opacity=100, finishopacity=0, style=1) }
	Ko╗ßtko	{ filter: alpha(style=2) }
	Ko╗ßtko	{ filter: alpha(opacity=0, finishopacity=100, style=3) }
	Ko╗ßtko	{ filter: alpha(opacity=0, finishopacity=70, style=1, startx=10, starty=20, finishx=40, finishy=60) }

Dß se ud∞lat takΘ jednoduchß pr∙hlednost v Mozille.

Blur -- Rozmazßnφ

	Ko╗ßtko	{ filter: blur }
	Ko╗ßtko	{ filter: blur(add=0, direction=135, strength=10) }
	Ko╗ßtko	{ filter: blur(add=1, direction=135, strength=10) }

Chroma -- Zpr∙hledn∞nφ barvy

	Ko╗ßtko	{ filter: chroma(color=#00ff00) }
	Ko╗ßtko	{ filter: chroma(color=#000000) }

DropShadow -- Stφn 1

	Ko╗ßtko	{ filter: dropshadow(color=999999, offx=5, offy=-3, positive=1) }
	Ko╗ßtko	{ filter: dropshadow(color=ffff00, offx=5, offy=-3, positive=0) }

Shadow -- Stφn 2

	Ko╗ßtko	{ filter: shadow(color=#39933, direction=45) }
	Ko╗ßtko	{ filter: shadow(color=#880000, direction=180) }

FlipH + FlipV -- P°evracenφ horizontßlnφ a vertikßlnφ

	Ko╗ßtko	{ filter: fliph }
	Ko╗ßtko	{ filter: flipv }

Glow -- Obsvφcenφ

	Ko╗ßtko	{ filter: glow(color=00ff00, strength=1) }
	Ko╗ßtko	{ filter: glow(color=ff0000, strength=20) }

Gray + Xray -- ╚ernobφlost

	Ko╗ßtko	{ filter: gray }
	Ko╗ßtko	{ filter: xray }

Invert -- Negativ

Ko╗ßtko

{ filter: invert }

Mask -- Maska

Ko╗ßtko

{ filter: mask(color=#333300) }

Wave -- Vlna

	Ko╗ßtko	{ filter: wave(add=0, freq=1, light=40, phase=0, strength=10) }
	Ko╗ßtko	{ filter: wave(add=0, freq=5, light=100, phase=0, strength=20) }
	Ko╗ßtko	{ filter: wave(add=0, freq=2, light=5, phase=50, strength=10) }
	Ko╗ßtko	{ filter: wave(add=1, freq=2, light=20, phase=0, strength=4) }

Filtr Light se p°idßvß pomocφ skript∙. Umφm to, ale pravd∞podobn∞ to dßm na n∞jakou p°φ╣tφ strßnku s p°φklady, proto╛e je p∙l pßtΘ rßno 25. 7. 1999.

Vizte tΘ╛: popis syntaxe filtr∙, ·vod do CSS, obrßzky na webu