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
