Dnes projdeme čtyři filtry v CSS použitelné pouze se syntaxí Microsoftu. Jsou to filtry ICMFilter a Matrix, MotionBlur a MaskFilter, které již byly podrobně popsány v jiném článku, proto se o nich zmíním jen okrajově. Zajímavý a složitější filtr Matrix nám je ale bezpochyby vynahradí. Filtr ICMFiltr zase potěší všechny, kdo potřebují pracovat se změnou barevných profilů.

Filtr ICMFilter

Filtr ICMFilter, jak již název napovídá, přemění barevný obsah prvku dle zadaného ICM (Image Color Management) profilu. To nám umožňuje jej využít k imitaci výstupu různých periferních zařízení, například monitorů či tiskáren.

Syntaxe:

<ELEMENT STYLE=“filter:progid:DXImageTransform.Microsoft.ICMFilter(colorspace=string, intent=integer);“>

Parametr Popis
ColorSpace Určí název a cestu konkrétního ICM profilu, pomocí kterého bude daný prvek konvertován a zobrazen.
Intent Určí zamýšlený záměr využití barevného obsahu prvku a dle něj přispůsobí výstup filtru. Může nabývat hodnot Picture (výchozí, použití pro obrázky a fotografie), Graphic (použití pro obchodní grafiku a grafy), Proof nebo Match.

Jak, již bylo řečeno, lze tohoto filtru využít k imitaci výstupu při různém ICM profilu. Podívejte se nyní na jeden příklad využití tohoto filtru při zobrazení daného obrázku, pomocí různých barevných profilů, jejichž názvy jsou pro orientaci uvedené vždy pod obrázkem. Pro porovnání jsem přidal také původní obrázek.

Obrázek bez použítí filtru
Původní obrázek

Obrázek s použítím filtru ICMFiltr
Obrázek s použítím filtru ICMFilter – ICM profil CIE RGB

Obrázek s použítím filtru ICMFiltr
Obrázek s použítím filtru ICMFilter – ICM profil RICOH RUSSIAN-SC 040402

Obrázek s použítím filtru ICMFiltr
Obrázek s použítím filtru ICMFilter – ICM profil NTSC (1953)

Zdrojový kód ukázek:

<img src=“icmfilter1.jpg“ width=“300px“ height=“200px“ border=“0″ alt=“Obrázek s použítím filtru ICMFiltr“ style=“filter: progid:DXImageTransform.Microsoft.ICMFilter(colorspace=c:\windows\system32\spool\drivers\color\nazev_profilu.icm);“ />

Filtr MaskFilter

Tento filtr vykreslí transparentní plochy prvku zadanou barvou a z netransparentních ploch udělá průhlednou masku.

Syntaxe:

<ELEMENT STYLE=“filter:progid:DXImageTransform.Microsoft.MaskFilter(color=#RRGGBB, enabled=boolean);“>

Více již bylo řečeno v předchozích článcích, filtr MaskFilter totiž nahrazuje filtr Mask. Jeho chování i vlastnosti jsou zcela totožné. Stejného výsledku je možno dosáhnout také použitím filtru BasicImage, pomocí nastavení jeho parametrů Mask a MaskColor (viz předchozí článek).

Filtr Matrix

Filtr Matrix dokáže prvek libovolně otočit podle horizontální i vertikální roviny, přičemž jej lze také zvětšovat či zmenšovat do nejrůznějších rozměrů.

Syntaxe:

<ELEMENT STYLE=“filter:progid:DXImageTransform.Microsoft.Matrix(dx=floating-point, dy=floating-point, enabled=boolean, filtertype=string, m11=floating-point, m12=floating-point, m21=floating-point, m22=floating-point, sizingmethod=string);“>

Parametr Popis
Dx Určuje velikost složky x vektoru lineárního zvětšení. Výchozí hodnotou je 1.0.
Dy Určuje velikost složky y vektoru lineárního zvětšení. Výchozí hodnotou je 1.0.
Enabled Určuje možnost použití filtru. Může nabývat hodnot true (zapnutý) nebo false (vypnutý).
FilterType Určuje metodu použitou pro vymezení pixelů nového obsahu prvku. Může nabývat hodnot bilinear (výchozí) a nearest neighbor (rychlejší, vhodná zejména pro animace).
M11 Určuje první řadu a první sloupec pro lineární transformaci. Výchozí hodnotou je 1.0.
M12 Určuje první řadu a druhý sloupec pro lineární transformaci. Výchozí hodnotou je 0.0.
M21 Určuje druhou řadu a první sloupec pro lineární transformaci. Výchozí hodnotou je 0.0.
M22 Určuje druhou řadu a druhý sloupec pro lineární transformaci. Výchozí hodnotou je 1.0.
SizingMethod Určuje zda bude obsah prvku zobrazen pouze do původní oblasti prvku, nebo se oblast zvětší. Může nabývat hodnot clip to original (výchozí) nebo auto expand.

Použitím filtru Matrix ve spojení se skripty můžete dosáhnout zajímavých efektů, rotujících obrázků a podobně. Příklad, na kterém si všechny záludnosti použití tohoto filtru a jeho parametrů můžete vyzkoušet, naleznete na testovací stránce, vytvořené Microsoftem právě k tomuto účelu.

Jeden ukázkový příklad použití filtru Matrix na logu MSIE jsem pro vás připravil také zde. (Obrázek s filtrem je pouhým snímkem obrazovky, aby jej mohli shlédnout i uživatelé jiných prohlížečů.)

Obrázek neovlivněný filtrem Matrix
Obrázek neovlivněný filtrem Matrix

Obrázek ovlivněný filtrem Matrix
Obrázek ovlivněný filtrem Matrix

Zdrojový kód příkladu:

<div style=“width: 250px; height:150px; filter:progid:DXImageTransform.Microsoft.Matrix(m11=1, m12=1.3, m21=2.4, m22=1.5, sizingmethod=’auto expand‘);“><img src=“matrix.gif“ border=“0″ width=“250px“ height=“120px“ alt=“Obrázek ovlivněný filtrem Matrix“ /><br />Obrázek ovlivněný filtrem Matrix</div>

Filtr MotionBlur

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

Syntaxe:

<ELEMENT STYLE=“filter:progid:DXImageTransform.Microsoft.MotionBlur(add=boolean, direction=integer, enabled=boolean, strength=integer);“>

Také o tomto filtru již bylo na Intervalu psáno. Filtr MotionBlur je totožný s filtrem Blur (filtr se starou syntaxí).

Nezapomeňte, že zmíněné filtry fungují pouze v prohlížečích MSIE 5.5 a vyšších.

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

Odpovědět