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

Máte Explorer?

Tuto stránku má smysl prohlížet pouze v Microsoft Internet Exploreru 4.x nebo novějším prohlížeči, který filtry podporuje. IE 3, Netscape 4, Opera ani Mozilla (Firefox) 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.

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=#339933, 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.

 

Reklama

 

 

 

Vizte též

• popis syntaxe filtrů,
• CSS vlastnost filter
• úvod do CSS,
• obrázky na webu