Statické filtry dle Microsoftu

15. ledna 2003

•

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ázkový obrázek - bez filtru
Ukázka nového filtru Matrix
Ukázkový obrázek - s filtrem

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