Filtry

 Filtry jsou zatím specialitou Internet Exploreru od verze 4 a ten umí určitým způsobem změnit vzhled obrázku a textů a právě tomu se říká filtr. Můžeme je nechat zvlnit, rozmazávat, zesvětlit, převracet, zprůhlednit a mnoho dalšího. Zatím jsem nějak moc neviděl je používat, asi právě proto že je to doména jen Internet Exploreru a nevím jak by se mohli chovat v jiných prohlížečích.

Zápis filtru

 Filtry se dají aplikovat většinou jen na obrázky a rozměrované elementy něco jako text. Filtry patří do CSS stylů, a proto se také zapisují pomocí style.
<img src="obrázek.gif" style="filter: XRay"> nebo takhle
div {filter: alpha(opacity=50, style=2); width: 50px}

Alpha

 Nastavuje míru průhlednosti objektu nebo lze vytvářet i barevné přechody.
filter: alpha(parametry)
Opacity = Průhlednost (0 = úplně průhledná, 100 = neprůhledná).
FinishOpacity = Průhlednost (0--100).
Style = Určení tvaru barevn0ho přechodu: 0 (jednotný), 1 (lineární), 2 (radiální) a 3 (obdélníkový).
StartX = Souřadnice x začátku přechodu.
StartY = Souřadnice y začátku přechodu.
FinishX = Souřadnice x konce přechodu.
FinishY = Souřadnice y konce přechodu.

Ukázky:

Normálně	filter: alpha(opacity=50)	filter: alpha(style=3, opacity=70)	filter: alpha(style=1, opacity=50)

Blur

 Vytvoří efekt objektu pohybujícího se vysokou rychlostí tedy nastaví jeho rozmazáním v jednom směru.
filter: blur(parametry)
Add 1 = do rozmazaného obrázku se přidá ještě i původní obrázek;
0 = zde se výsledek nebude kombinovat s originálním obrázkem.
Direction = Úhel pod kterým se rozmazávat. Úhel se zadává ve stupních a možné jsou pouze násobky 45°.
Strength = Síla rozmazání.

Ukázka:
style="filter: blur(direction=45, add=1, strength=4); width: 90px; height: 90px,"

text

Chroma

 Určitou barvu objektu vykreslí jako průhlednou.
filter: chroma(parametry)
Color = Barva, která bude průhledná.

Ukázka:
filter: chroma(color=#94622C)

DropShadow

 Filtr vytvoří k objektu stín a tím i zdánlivý efekt, že se objekt vznáší nad stránkou neboli efekt vrženého stínu.
filter: DropShadow(parametry)
offX - poloha stínu vzhledem k objektu v ose x
offY - poloha stínu vzhledem k objektu v ose y
color - barva stínu
positive - 1, 0
style="width: 110px; height: 20px;filter: DropShadow(color=lightblue, positive=1, offY=3, offX=12)"

text se stínem

Shadow

 Vytvoří k objektu jeho stín, ale ne vržený.
filter: Shadow(parametry)
color - barva
direction - úhel, zase jen v násobcích 45°

Ukázka:
style="width: 110px; height: 20px;filter: Shadow(color=lightblue, direction=45)"

text se stínem

FlipH a FlipV

 Převrátí objekt buďto horizontálně nebo vertikálně.
filter: Flipv| Fliph
style="filter: flipv; width: 100px"   Text vertikalne
style="filter: flipv; width: 150px"   Text horizontalne

Gray

 Všechny barvy v objektu nebo lépe řečeno obrázek převede na odstíny šedi.
filter: gray

Wave

 Zdeformuje objekt do tvaru sinusoidy. Lépe řečeno zvlní jej.
filter: wave(parametry)
Add 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 = počet vln v deformaci odborně řečeno frekvence.
Light = světelná intenzita vlny (0--100).
Phase = Fázové posunutí začátku vlny. Udává se od 0 do 100 jako procento z jednoho úplného sinusocého průběhu.
Strength = síla efektu.
style="filter: wave(add=0, freq=1, light=90, phase=15, strength=10); width: 240px; height: 50px; font-size: 15pt" zvlněný text

Glow

 Vytvoří dojem toho, že objekt svítí tím, že barvou obkreslí okraje objektu.
filter: glow(parametry)
color - barva(RGB)
strenght - síla
style="filter: glow(color=green, strength=3); width: 240px; height: 60px; font-size: 16pt"
Zelený text
style="filter: glow(color=yellow, strength=3); width: 240px; height: 40px; font-size: 13pt"
žlutý text

Mask

 Udělá obrys okolo objektu.
filter: mask(parametry)
color - barva
style="filter: mask(color=#000099); width: 90px; height: 14px; font-size: 11pt"
obtečený text

Invert

 Udělá z objektu negativ.
filter: invert

XRay

filter: XRay