Statické filtry v CSS – vizuální efekty bez grafického editoru

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:

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í:

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.