Příklady filtrů
2016: Filtry je třeba považovat za totálně zastaralou
věc. Článek zde nechávám z nostalgie.
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. Většina prohlížečů to neumí.
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
