Filtros Multimedia mediante CSS's en IE: MaskFilter

Tema relacionado: Transiciones en IE

1. Introducción
2. Catálogo de Filtros
1. 2.1 Alpha
2. 2.2 Basic Image
3. 2.3 Blur
4. 2.4 Drop Shadow
5. 2.5 Emboss
6. 2.6 Engrave
7. 2.7 Glow
8. 2.8 Light
9. 2.9 MaskFilter: El filtro MaskFilter muestra las áreas transparentes de un objeto como una máscara de color y las áreas opacas del objeto como transparentes:

Original	Transformación
Artículos Discos Libros Videos y DVD's Informática Consumibles Oficina Informática	Artículos Discos Libros Videos y DVD's Informática Consumibles Oficina Informática

En la hoja de estilo asociada se le asigna el filtro MaskFilter como una clase asociada a dicho contenedor: #containerMaskfilter1{ width: 60px; -ms-filter: "progid:DXImageTransform.Microsoft.MaskFilter(color=#000000)"; filter: progid:DXImageTransform.Microsoft.MaskFilter(color=#000000); } Y en el HTML se pone la imágen o el objeto que deseemos dentro del contenedor con la clase asociada: <div id="containerMaskfilter1" > <img src="images/chaplin.gif" alt="Aspecto con Filtro MaskFilter" /> </div> Por último, se puede embeber el filtro dentro del código HTML del elemento (mediante style): <div style="width: 60px; -ms-filter: 'progid:DXImageTransform.Microsoft.MaskFilter(color=#000000)'; filter: progid:DXImageTransform.Microsoft.MaskFilter(color=#000000);"> ... </div> Al estar entre las comillas dobles de style, las comillas que se utilizan para definir el filtro deben ser simples. Recordar que sólo en el caso de las imágenes no es necesario ponerlas dentro de un contenedor, sino que pueden tener el id directamente asociado: <img id="containerMaskfilter1" src="images/chaplin.gif" alt="Aspecto con Filtro MaskFilter" /></div>

Atributos / Propiedades

Atributo / Propiedad	Valores	Descripción	Por defecto
enabled	true false	Determina si el filtro está habilitado.	true
Color	#000000 ... #FFFFFF (hexadecimal)	Valor del color en hexadecimal que se va a hacer transparente.

Filtros:

	Alpha	Basic Image	Blur	Drop Shadow	Emboss	Engrave
	Glow	Light	MaskFilter	Motion Blur	Shadow	Wave

Temas relacionados: Filtos y scripting en IE | Transiciones en IE