Página Inicial de WebUsable

Página anterior Página Inicial de WebUsable Disminuir tamaño de letra Aumentar tamaño de letra Mapa de WebUsable Envía tus comentarios
 

 Filtros Multimedia mediante CSS's en IE: Shadow

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
    10. 2.10 MotionBlur
    11. 2.11 Shadow: El filtro Shadow rodea de una silueta al objeto al que se aplica generándole además una sombra externa en la dirección en que se especifique:
    12. Original Transformación
      Aspecto original
      Aspecto con Filtro Shadow
      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 Shadow como una clase asociada a dicho contenedor:

      #containerShadow1{
      width: 90%;
      -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Color=gray, direction=45)";
      filter: progid:DXImageTransform.Microsoft.Shadow(Color=gray, direction=45);
      }

      Y en el HTML se pone la imágen o el objeto que deseemos dentro del contenedor con la clase asociada:

      <div id="containerShadow1" >
      <img src="images/vela.gif" alt="Aspecto con Filtro Shadow" />
      </div>

      Por último, se puede embeber el filtro dentro del código HTML del elemento (mediante style):

      <div style="width: 90%;
      -ms-filter: 'progid:DXImageTransform.Microsoft.Shadow(Color=gray, direction=45)';
      filter: progid:DXImageTransform.Microsoft.Shadow(Color=gray, direction=45);">
      ... </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="containerShadow1" src="images/vela.gif" alt="Aspecto con Filtro Shadow" /></div>

      Atributos / Propiedades
      Atributo /
      Propiedad
      Valores Descripción Por defecto
      enabled
      • true
      • false
      Determina si el filtro está habilitado. true
      Color
      • #000000
      • ...
      • #FFFFFF
      • (hexadecimal)
      Especifica el color en hexadecimal (o nombre) de la sombra que proyecta el objeto.
      direction
      • 0 Sup.
      • 45 Sup. Dcha.
      • 90 Dcha.
      • 135 Inf. Dcha.
      • 180 Inf.
      • 225 Inf. Izqda.
      • 270 Izqda.
      • 315 Sup. Izqda.
      • 360 Sup.
      Ängulo de la dirección en que se proyecta la sombra. 270
      strength
      • 1
      • ...
      • 255
      Determina a qué distancia (en pixels) se propaga la sombra. 5


Filtros:
Filtro Anterior Alpha Basic Image Blur Drop Shadow Emboss Engrave Siguiente Filtro
Glow Light MaskFilter MotionBlur Shadow Wave

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

 
 
WebUsable.com © Todos los derechos reservados.
Subir al inicio de página Página anterior Página Inicial de WebUsable Imprimir esta página Envía tus comentarios Recomienda esta página a un amigo Mapa de WebUsable