Statické filtry dle Microsoftu
Obsah
Související
O statických filtrech v CSS již byla na Intervalu řeč před nedávnem. V tomto článku bych se ale rád zaměřil na statické filtry použitelné pouze s novou syntaxí dle definice Microsoftu. Tedy ty, které se pravděpodobně nestanou součástí normy CSS3.
I když už o statických filtrech bylo mnoho řečeno v předchozí sérii článků, rád bych stručně zopakoval alespoň pár základních informací. Statické filtry dokáží na webových stránkách vytvořit velice zajímavé vizuální efekty. Můžete s nimi například deformovat obrázky, aniž byste je poškodili, ale aplikovat je lze i na jiné prvky dokumentu. Jejich nespornou výhodou přitom je, že běží na straně klienta a nezatěžují tak spojení se serverem.
Nová syntaxe, definovaná Microsoftem, ale samozřejmě funguje pouze v prohlížečích této firmy, a to navíc jen v nejnovějších verzích jejich prohlížečů. Statické filtry, o kterých bude dnes řeč, vám tedy budou pracovat jenom v prohlížečích MSIE od verze 5.5 a nejsou zahrnuty do žádných standardů! Proto bych vám spíše doporučoval používat syntaxi dle CSS, která vám sice neumožní využít nejnovější filtry, ale do budoucna by měla být zařazena do standardu CSS3 a bude více kompatibilní se staršími prohlížeči.
Syntaxe vlastnosti filter
Než se podíváme na jednotlivé filtry, pokusím se vám přiblížit syntaxi těchto filtrů dle definice Microsoftu. Je velice podobná syntaxi jazyka CSS, ovšem v definici je použito slovo „Microsoft“. Základní syntaxe vydapá následovně: <ELEMENT STYLE = "filter:progid:DXImageTransform.Microsoft.Nazev_statickeho_filtru (filter_param1, filter_param2, filter_param3, ...);">
Aby vše nebylo tak jednoduché, chovají se některé filtry s použitím této syntaxe jinak, než při použití syntaxe dle jazyka CSS. Některé filtry jsou navíc s touto syntaxí nepoužitelné.
Přístup k vlastnosti filtr pomocí skriptů má následující syntaxi: object.style.filter = "progid:DXImageTransform.Microsoft.Nazev_statickeho_filtru (filter_param1, filter_param2, filter_param3, ...)"
Vlastnost filter je s touto definicí použitelná u velké většiny elementů (X)HTML. Pouze u elementů DIV a SPAN musí být stejně jako i u staré syntaxe definován atribut height nebo width a pozice nastavena na absolute.
Přehled filtrů
Zde uvádím přehledovou tabulku všech statických filtrů, které jsou použitelné pouze s touto syntaxí, spolu s jejich stručným popisem a použitelnými parametry:
| Název filtru | Efekt | Parametry |
|---|---|---|
| BasicImage | Nahrazuje filtry FlipH, FlipV, Gray, Invert, Xray (použitelné se starou syntaxí). | enabled=boolean, grayscale=boolean, invert=boolean, mask=boolean, maskcolor=integer, mirror=boolean, opacity=floating-point, rotation=integer, xray=boolean |
| Compositor | Zobrazí nový prvek se změněnou průhledností určitých oblastí prvku původního. Funguje jako přechod, ale předává pouze statický obsah. | function=integer |
| Emboss | Vyryje světlé části prvku do černobílého podkladu. | bias=floating-point, enabled=boolean |
| Engrave | Vyryje tmavé části prvku do černobíleho podkladu. Opak filtru Emboss. | bias=floating-point, enabled=boolean |
| ICMFilter | Konvertuje(přemění) barevný obsah prvku na základě ICM (Image Color Management) profilu. | colorspace=string, intent=integer |
| MaskFilter | Vytvoří ze zadané barvy prvku průsvitnou masku. Identický s filtrem Mask (použitelný se starou syntaxí). | color=#RRGGBB, enabled=boolean |
| Matrix | Změní velikost prvku či jej libovolně natočí podle jakékoli osy. | dx=floating-point, dy=floating-point, enabled=boolean, filtertype=string, m11=floating-point, m12=floating-point, m21=floating-point, m22=floating-point, sizingmethod=string |
| MotionBlur | Vytvoří iluzi prvku v pohybu. Identický s filtrem Blur(použitelný se starou syntaxí). | add=boolean, direction=integer, enabled=boolean, strength=integer |
Malá ukázka
V krátkosti vám předvedu, co dokáží filtry, o kterých v tomto článku byla řeč. Tento příklad ukazuje možnost použití filtru Matrix, který dokáže prvek otočit opravdu dle libosti:
Ukázka nového filtru Matrix
Zdrojový kód transformace: <div style="width: 500px; height: 300px; filter:progid:DXImageTransform.Microsoft.Matrix(m11=2, m12=1.5, m21=0.8, m22=2);"><img src="matrix.gif" alt="Ukazkovy obrazek - s pouzitim filtru" border="0"><br> Ukázka nového filtru Matrix</div>
Pravý obrázek je kopií prvku, který by vznikl použitím filtru Matrix na levý obrázek s textem v prohlížeči MSIE 6.0. Zde jsem ale využil sejmutého obrázku, aby výsledek mohli zhlédnout i uživatelé jiných prohlížečů.
Starší komentáře ke článku
Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.
