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); }
| Parametr | Popis |
| Enabled | Určuje možnost použití filtru. Může nabývat hodnot true (zapnutý) nebo false (vypnutý). |
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); }
| Parametr | Popis |
| Enabled | Určuje možnost použití filtru. Může nabývat hodnot true (zapnutý) nebo false (vypnutý). |
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); }
| Parametr | Popis |
| Color | Určí barvu „ozáření“. Barva je specifikována ve standardním formátu #RRGGBB, kde RR je hodnota červené barvy vyjádřená v hexadecimálním tvaru, GG hodnota zelené barvy a BB hodnota modré barvy. |
| Enabled | Určuje možnost použití filtru. Může nabývat hodnot true (zapnutý) nebo false (vypnutý). |
| Strength | Nastaví tloušťku „ozáření“. Tloušťka je v pixelech. Může nabývat číselných hodnot až do velikosti prvku. |
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); }
| Parametr | Popis |
| Color | Určí barvu stínu. Barva je specifikována ve standardním formátu #RRGGBB, kde RR je hodnota červené barvy vyjádřená v hexadecimálním tvaru, GG hodnota zelené barvy a BB hodnota modré barvy. |
| Direction | Nastaví směr posunutí měřený ve stupních od vertikální polohy. Může nabývat hodnot 0, 45, 90, 135, 180, 225, 270 (přednastavený), 315. |
| Enabled | Určuje možnost použití filtru. Může nabývat hodnot true (zapnutý) nebo false (vypnutý). |
| Strength | Nastaví velikost posunutí. Délka je v pixelech. Může nabývat číselných hodnot až do velikosti prvku. |
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); }
| Parametr | Popis |
| Add | Nastaví zda má být původní prvek zobrazen nebo ne. Může nabývat hodnot true (zobrazit – přednastavený) nebo false (nezobrazit). |
| Enabled | Určuje možnost použití filtru. Může nabývat hodnot true (zapnutý) nebo false (vypnutý). |
| Freq | Nastaví počet vln filtru Wave. Může nabývat číselných hodnot. |
| LightStrength | Nastaví rozdíl mezi intenzitou světla na vrcholech vln a mezi nimi. Může nabývat číselných hodnot od 0 (žádný kontrast) do 100 (největší kontrast). |
| Phase | Nastaví ve které fázi vlny má vlnění začít. Může nabývat číselných hodnot od 0 do 100. |
| Strength | Nastaví vzdálenost, o kterou se vlnění rozšíří do stran. Délka je v pixelech. Může nabývat číselných hodnot až do velikosti prvku. |
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>
