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 :

Fotografie s použitým filtrem 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>

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

Odpovědět