Statické filtry v CSS – přehled 2.

V dnešním přehledu si předvedeme možnosti filtrů pro změnu orientace objektu (FlipH a FlipV), filtr Glow, který manipuluje s okraji objektu, filtr Shadow pro vytvoření stínu objektu a nakonec filtr Wawe, který vytváří na objektu vlny ve vertikálním směru.

Předem opět upozorňuji, že plnou podporu těchto filtrů obsahují pouze prohlížeče firmy Microsoft, ačkoli v novém návrhu CSS3 je na ně také pamatováno. Některé další prohlížeče je již začínají implementovat.

Filtr FlipH

Filtr FlipH vytvoří z prvku zrcadlově převrácený prvek, podél horizontální roviny.

Syntaxe: { filter: fliph (enabled=boolean); }

Firma Microsoft zahrnula tento filtr také do nového filtru BasicImage, který lze použít ve spojení s novou syntaxí, ovšem ta je podporována až od MSIE 5.5. Filtr FlipH je velice jednoduchý, podívejte se na tento příklad:

Prvek DIV ovlivněný filtrem FlipH

Zdrojový kód je <div style="height: 20px; color:#0099cc; filter: fliph ();">Prvek DIV ovlivněný filtrem FlipH</div>

Filtr FlipV

Podobně jako filtr FlipH vytvoří z prvku zrcadlově převrácený prvek, avšak podél vertikální roviny.

Syntaxe: { filter: flipv (enabled=boolean); }

Také tento filtr zahrnula firma Microsoft do nového filtru BasicImage, který je ale podporován až od MSIE 5.5. Podívejte se na příklad jeho použití:

Prvek DIV ovlivněný filtrem FlipV

Zdrojový kód je <div style="height: 20px; color:#00cc99; filter: flipv ();">Prvek DIV ovlivněný filtrem FlipV</div>

Filtr Glow

Filtr Glow vytvoří okolo vnějších okrajů „ozáření“ zadané barvy a určité tloušťky.

Syntaxe: { filter: glow (color=#RRGGBB, enabled=boolean, strength=integer); }

Pokud prvek obsahuje nějaký text a nemá na pozadí barvu či obrázek, bude každý znak samostatně ovlivněn filtrem. Pokud však obsahuje prvek text a má barevné pozadí či obrázek na pozadí, budou filtrem ovlivněny pouze okraje prvku. Pokud prvek s filtrem obsahuje nějaký další prvek, který je zobrazen mimo rodičovský prvek, nebude ovlivněn filtrem.

Filtr Glow je opravdu velice efektní a je tedy pravděpodobné, že se velmi rozšíří. Doporučuji vám vyzkoušet si jej na testovací stránce. Pokud si vystačíte s jednodušším příkladem, pak jej máte mít:

Prvek DIV s textem, který využívá filtru Glow

Zdrojový kód je <div style="height: 18px; border: 1px solid; text-align: center; filter: glow (color=#fff0cc, strength=4);">Prvek DIV s textem, který využívá filtru Glow</div>

Filtr Shadow

Tento filtr vykreslí obrys prvku a posune jej zadaným směrem. Vytvoří tak iluzi stínu.

Syntaxe: { filter: shadow (color=#RRGGBB, direction=integer, enabled=boolean, strength=integer); }

Možná vám připadá tento filtr podobný filtru DropShadow, protože oba vytvářejí iluzi stínu. Rozdíl spočívá v tom, že filtr DropShadow vytvoří stín z celého prvku, zatímco filtr Shadow pouze z obrysů prvku. S filtrem Shadow se dají vytvořit ještě efektnější stíny než s filtrem DropShadow, jak je vidět na testovací stránce. Výsledek může vypadat například takto:

Text, který využívá filtru Shadow k vytvoření stínu

Zdrojový kód je <div style="height: 25px; text-align: center; font-size: 25px; filter: shadow (color=#a0e0ff, direction=135, strength=4)">Text, který využívá filtru Shadow k vytvoření stínu</div>

Filtr Wave

Tento filtr vytváří na prvku vlny ve vertikálním směru.

Syntaxe: { filter: wave (add=boolean, enabled=boolean, freq=integer, lightstrenght=integer, phase=integer, strength=integer); }

Nejlépe všechny parametry tohoto filtru pochopíte, pokud si je sami vyzkoušíte. Můžete tak učinit na testovací stránce. Takhle si dokáže s fotografií pohrát filtr Wave :

Zdrojový kód je <div style="height: 400px; text-align: center; filter: wave (add=true, freq=2, lightstrength=80, phase=25, strength=20);"><img src="wave.jpg" width="280px" height="400px" border="0" alt="Fotografie s použitým filtrem Wave"></div>