Nové filtry dle Microsoftu 2.

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);“>

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.

Původní obrázek

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

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

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);“>

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 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.