Filtros Multimedia mediante CSS's en IE: DropShadow

Temas relacionados: Filtos y scripting en IE | 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: Añade una sombra alrededor del objeto al que se aplica:

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 Dropshadow como una clase asociada a dicho contenedor. En este filtro hay que asociar al objeto tanto un color de fondo negro background-color: black; como un color de frente blanco color: white; de al menos las dimensiones del objeto: #containerDropshadow1{ width: 90px; height: 220px; background-color: black; color: white; -ms-filter: "progid:DXImageTransform.Microsoft.dropShadow(color=gray,offX=5,offY=5, positive=true)"; filter: progid:DXImageTransform.Microsoft.dropShadow(color=gray,offX=5,offY=5, positive=true); } Y en el HTML se pone la imágen o el objeto que deseemos dentro del contenedor con la clase asociada: <div id="containerDropshadow1" > <img src="images/vela.gif" alt="Aspecto con Filtro Drop Shadow" /> </div> Por último, se puede embeber el filtro dentro del código HTML del elemento (mediante style): <div class="ejAreas1" style="width: 90px;height: 220px;background-color: black;color: white; -ms-filter: 'progid:DXImageTransform.Microsoft.dropShadow(color=gray,offX=5,offY=5, positive=true)'; filter: progid:DXImageTransform.Microsoft.dropShadow(color=gray,offX=5,offY=5, positive=true)">... </div> 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="containerDropshadow1" src="images/vela.gif" alt="Aspecto con Filtro Drop Shadow" /></div> Nota: Recordar que all estar entre las comillas dobles de style, las comillas que se utilizan para definir el filtro deben ser simples.

Atributos / Propiedades

Atributo / Propiedad	Valores	Descripción	Por defecto
enabled	true false	Determina si el filtro está habilitado.	true
color	gray #99AA55 ...	Especifica el valor en hexadecimal del color de la sombra del objeto.
offX, offY	0 1 7 (cualquier entero) (pixels implícito)	Distancia horizontal y vertical de la sombra externa al objeto.	5, 5
positive	true false	Especifica si se crea la sombra desde las áreas no transparentes del objeto.	true

Filtros:

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

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