V prvním přehledu si představíme filtry pro nastavení průhlednosti prvku (Alpha), zobrazení grafiky v pohybu (Blur), vytvoříme iluzi stínu (DropShadow) a nakonec elegantně nastavíme vybranou barvu jako průhlednou (Chroma).

Filtr Alpha

Tento filtr nastaví úroveň průhlednosti prvku. Průhlednost lze nastavit buď jednotně pro celý objekt nebo stupňovitě v lineárních nebo radiálních tvarech.

Syntaxe: { filter: alpha(enabled=boolean, finishopacity=integer, finishx=integer, finishy=integer, opacity=integer, startx=integer, starty=integer, style=integer); }

Parametr Popis
Enabled Určuje možnost použití filtru. Může nabývat hodnot true (zapnutý) nebo false (vypnutý).
FinishOpacity Nastaví konečnou úroveň průhlednosti. Může nabývat hodnot 0 (průhledný) až 100 (neprůhledný).
FinishX Nastaví konečnou úroveň souřadnice x průhlednosti. Může nabývat hodnot 0 (průhledný) až 100 (neprůhledný).
FinishY Nastaví konečnou úroveň souřadnice y průhlednosti. Může nabývat hodnot 0 (průhledný) až 100 (neprůhledný).
Opacity Nastaví úroveň průhlednosti (počáteční). Může nabývat hodnot 0 (průhledný) až 100 (neprůhledný).
StartX Nastaví počáteční úroveň souřadnice x průhlednosti. Může nabývat hodnot 0 (průhledný) až 100 (neprůhledný).
StartY Nastaví počáteční úroveň souřadnice y průhlednosti. Může nabývat hodnot 0 (průhledný) až 100 (neprůhledný).
Style Nastaví styl průhlednosti. Může nabývat hodnot 0 (jednotný), 1 (lineární), 2 (radiální) a 3 (pravoúhlý).

Filtr Alpha má různé možnosti užití, a to hlavně díky parametru Style. Tento parametr proto vyžaduje ještě doplňující vysvětlení. Jak jsme se již dozvěděli, může nabývat čtyř hodnot:

  • 0 ~ Můžeme určit jen parametry opacity a enabled. Parametr opacity v tomto případě určuje jednotně průhlednost celého prvku.
  • 1 ~ Můžeme určit všechny parametry filtru. Průhlednost se projevuje v lineárních tendencích.
  • 2 ~ Můžeme určit pouze parametry opacity, finishopacity a enabled. Průhlednost se projevuje v radiálních tendencích, parametr opacity určuje průhlednost ve středu prvku zatímco parametr finishopacity na okraji prvku.
  • 3 ~ Můžeme určit také pouze parametry opacity, finishopacity a enabled. Průhlednost se projevuje v obdélníkových (pravoúhlých) tendencích, parametr opacity určuje průhlednost ve středu prvku a parametr finishopacity na okraji prvku.

Pro snazší pochopení funkčnosti filtru je dobré využít možností testovací stránky připravené Microsoftem.

Filtr Blur

Tento filtr vytvoří iluzi prvku v pohybu. Prvek tedy bude ve vybraném směru a délce rozostřen.

Syntaxe: { filter: blur(add=boolean, direction=integer, enabled=boolean, strength=integer); }

Parametr Popis
Add Nastaví, zda má být původní prvek zobrazen, nebo ne. Může nabývat hodnot true (zobrazit, je přednastavená) nebo false (nezobrazit).
Direction Nastaví směr pohybu 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í délku, o kterou pohyb proběhne. Délka je v pixelech. Může nabývat číselných hodnot až do velikosti prvku.

Pro snazší pochopení funkčnosti filtru je dobré využít možností testovací stránky. Nelekejte se názvu filtru na stránce, MotionBlur je jen jeho nový, Microsoftem zavedený název, použitelný s novou syntaxi.

Tento text využívá filtru Blur!!!

Zdrojový kód je <div style='text-align: center; height: 20px; color:blue; filter: blur(add=true, direction=135, strength=5);'>Tento text využívá filtru Blur!!!<div>. Nezapomeňte, že u elementu DIV musí být definován atribut width nebo height!

Filtr DropShadow

Filtr Dropshadow vytvoří kopii prvku s určeným posunutím. Vzniká tak iluze stínu.

Syntaxe: { filter: (color=#RRGGBB, enabled=boolean, offx=integer, offy=integer, positive=boolean); }

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.
Enabled Určuje možnost použití filtru. Může nabývat hodnot true (zapnutý) nebo false (vypnutý).
OffX Nastaví vzdálenost stínu od souřadnice x. Udává vzdálenost v pixelech, může nabývat číselných hodnot.
OffY Nastaví vzdálenost stínu od souřadnice y. Udává vzdálenost v pixelech, může nabývat číselných hodnot.
Positive Určuje zda bude stín vytvořen z transparentních nebo netransparentních oblastí prvku. Může nabývat hodnot true (z neprůhledných oblastí) nebo false (z průhledných oblastí).

Pro snazší pochopení funkčnosti filtru je dobré využít možností testovací stránky.

Filtr DropShadow je nejlepším filtrem k vytváření stínu (podobného efektu mohou dosáhnout i některé další filtry):

Fotografie s využitím filtru DropShadow

Zdrojový kód je <div style='text-align: center; height: 225px; filter: dropshadow(color=#b0b0b0, offx=5, offy=5, positive=true);'><img src='dropshadow.jpg' width='300' height='215' border='0' alt='Fotografie s využitím filtru DropShadow'></div>.

Filtr Chroma

Filtr Chroma nastaví určitou barvu prvku jako transparentní (průhlednou).

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

Parametr Popis
Color Nastaví barvu, která bude zobrazena transparentně. 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ý).

Tento filtr raději nepoužívejte ve vizuálních prvcích s barevností od 8 do 24 bitů, zvláště pak v obrázcích typu JPEG. Pokud si chcete použití filtru Chroma otestovat, zkuste si jeho testovací stránku. Malý příklad můžete vidět také přímo zde:

Ukázkový text pro filtr Chroma

Zdrojový kód je <div id='ch' style='background: #0000cc; color: #ffff99; height: 20px;'>Ukázkový text pro filtr Chroma</div><br><input type='button' value='#0000cc' onclick='ch.style.filter="chroma(color=#0000cc)"'><input type='button' value='#ffff99' onclick="ch.style.filter='chroma(color=#ffff99)"'>.

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