Nové filtry dle Microsoftu 2.
Obsah
Související
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.
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);“>
| 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 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.
