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ů

Původní obrázekPouľí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
Kotě Ko»átko { filter: alpha(opacity=20) }
Kotě Ko»átko { filter: alpha(opacity=50) }
Kotě Ko»átko {filter: alpha(opacity=100, finishopacity=0, style=1) }
Kotě Ko»átko { filter: alpha(style=2) }
Kotě Ko»átko { filter: alpha(opacity=0, finishopacity=100, style=3) }
Kotě 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í
Kotě Ko»átko { filter: blur }
Kotě Ko»átko { filter: blur(add=0, direction=135, strength=10) }
Kotě Ko»átko { filter: blur(add=1, direction=135, strength=10) }
Chroma -- Zprůhlednění barvy
Kotě Ko»átko { filter: chroma(color=#00ff00) }
Kotě Ko»átko { filter: chroma(color=#000000) }
DropShadow -- Stín 1
Kotě Ko»átko { filter: dropshadow(color=999999, offx=5, offy=-3, positive=1) }
Kotě Ko»átko { filter: dropshadow(color=ffff00, offx=5, offy=-3, positive=0) }
Shadow -- Stín 2
Kotě Ko»átko { filter: shadow(color=#339933, direction=45) }
Kotě Ko»átko { filter: shadow(color=#880000, direction=180) }
FlipH + FlipV -- Převracení horizontální a vertikální
Kotě Ko»átko { filter: fliph }
Kotě Ko»átko { filter: flipv }
Glow -- Obsvícení
Kotě Ko»átko { filter: glow(color=00ff00, strength=1) }
Kotě Ko»átko { filter: glow(color=ff0000, strength=20) }
Gray + Xray -- Černobílost
Kotě Ko»átko { filter: gray }
Kotě Ko»átko { filter: xray }
Invert -- Negativ
Kotě Ko»átko { filter: invert }
Mask -- Maska
Kotě Ko»átko { filter: mask(color=#333300) }
Wave -- Vlna
Kotě Ko»átko { filter: wave(add=0, freq=1, light=40, phase=0, strength=10) }
Kotě Ko»átko { filter: wave(add=0, freq=5, light=100, phase=0, strength=20) }
Kotě Ko»átko { filter: wave(add=0, freq=2, light=5, phase=50, strength=10) }
Kotě 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

www.webhosting-c4.cz, webhosting s doménou v ceně. 20GB
o tvorbě, údrľbě a zlepąování internetových stránek

Návody HTML CSS JavaScript Články Ostatní

CSS kurz Přehled hodnot Vlastnosti CSS příklady

Jak psát web píąe Yuhů, Duąan Janovský. Kontakt.