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

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

O tvorbě, údržbě a zlepšování internetových stránek. Základy HTML CSS FrontPage JavaScript