Statické filtry dokáží vytvořit velice zajímavé vizuální efekty, a to nejen s obrázky. Jejich nespornou výhodou přitom je, že běží na straně klienta a nezatěžují tak spojení se serverem. Prozatím jsou však omezeny na prohlížeče MSIE a částečně také Netscape.

Můžete s nimi například deformovat obrázky, aniž byste je poškodili, ale aplikovat je lze i na jiné prvky dokumentu. Dosud byly statické filtry proprietárním řešením Microsoftu, ovšem v návrhu nového standardu CSS3 je na ně pamatováno, a proto si v několika článcích předvedeme, jak vlastně pracují.

Statické filtry se soustřeďují, jak vyplývá i z jejich názvu, na časově neproměnné změny prezentace prvků dokumentu. Harmonicky tak doplňují filtry dynamické (transitions) a definice standardních reakcí prezentační vrstvy (behaviors – blíže viz článek Přiřazení skriptu stylem). Definice filtrů je prováděna v rámci stylového předpisu, vazbou na novou vlastnost filter.

Syntaxe vlastnosti filter

Než se pustíme do přehledu jednotlivých filtrů, musíme porozumět způsobu, jakým se definují. Základní syntaxe vypadá následovně:

prvek { filter: nazev_statickeho_filtru(filter_param1, filter_param2, filter_param3, …); }

V dalších článcích se budu držet výše zmiňované syntaxe, protože z ní bude pravděpodobně vycházet i definice CSS3. Microsoft sice zavedl ještě další možnou syntaxi, tu však podporují až prohlížeče MSIE  5.5 a v některých případech neposkytuje stejné výsledky. Skriptový přístup k vlastnosti filter umožňuje následující syntaxe:

object.style.filter = „nazev_statickeho_filtru(filter_param1, filter_param2, filter_param3, …)“

A ještě jedna poznámka. Použití vlastnosti filter bylo v MSIE 4 silně omezeno na elementy body, button, img, input, marquee, table, td, textarea, tfoot, th, thead, tr a elementy div a span, u kterých musel být definován atribut height nebo width a pozice nastavena na „absolute“. MSIE od verze 5.5 umožňuje použití vlastnosti filter u velké většiny základních elementů, ačkoli ne všechny filtry jsou použitelné na každý element (X)HTML.

Přehled filtrů

Pro lepší orientaci uvádím přehledovou tabulku statických filtrů, spolu s jejich stručným popisem a parametry:

Název filtru Efekt Parametry
Alpha Nastaví úroveň průhlednosti vizuálního prvku. enabled=boolean, finishopacity=integer, finishx=integer, finishy=integer, opacity=integer, startx=integer, starty=integer, style=integer
Blur Vytvoří iluzi prvku v pohybu. add=boolean, direction=integer, enabled=boolean, strength=integer
DropShadow Vytvoří kopii prvku se zadaným posunutím. color=#RRGGBB, enabled=boolean, offx=integer, offy=integer, positive=boolean
Chroma Vykreslí určitou barvu transparentně. color=#RRGGBB, enabled=boolean
FlipH Vytvoří prvek převrácený podél horizontální roviny. enabled=boolean
FlipV Vytvoří prvek převrácený podél vertikální roviny. enabled=boolean
Glow Vytvoří „ozáření“ okolo prvku. color=#RRGGBB, enabled=boolean, strength=integer
Gray Zobrazí prvek černobíle. enabled=boolean
Invert Vytvoří efekt barevného negativu. enabled=boolean
Light Vytvoří efekt osvícení prvku světelným zdrojem. enabled=boolean
Mask Vytvoří z prvku průsvitnou masku. color=#RRGGBB, enabled=boolean
Shadow Vykreslí obrys prvku a posune ho daným směrem. color=#RRGGBB, direction=integer, enabled=boolean, strength=integer
Wave Vytvoří na prvku podélné vlny. add=boolean, enabled=boolean, freq=integer, lightstrength=integer, phase=integer, strength=integer
Xray Vykreslí jen vnější obrysy prvku. enabled=boolean

Malá ochutnávka

Než tento článek ukončím, nabídnu vám ještě malou ochutnávku, základní ukázku toho nejzákladnějšího, co je možno s filtry podnikat. První příklad ukazuje využití filtru Alpha pro vytvoření efektu postupného přechodu obrázku do pozadí:

Ukázkový obrázek - bez filtru     Ukázkový obrázek - s filtrem

Pravý obrázek je přesnou kopií toho, co MSIE provede s obrázkem levým. Zde jsem ovšem použil sejmutého obrázku, abych funkci filtru přiblížil i těm, kdož MSIE nepoužívají. Efektu bylo dosaženo použitím následujícího kódu:

<img src=oko.jpg‘ width=’150px‘ height=’84px‘ alt=’Ukázkový obrázek – s filtrem‘ style=’filter: alpha(opacity=100, finishopacity=5, style=2);‘>

Odkazy a zdroje

  • MSDN Microsoft – prozatím nejucelenější zdroj o problematice filtrů
  • CSS na W3C – referenční autorita v oblasti CSS
  • Netscape – informační centrum pro vývojáře

Starší komentáře ke článku

Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.

Žádný příspěvek v diskuzi

Odpovědět