Statické filtry v CSS – přehled 1.

31. října 2002

•

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)"'>.