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