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: MotionBlur

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: Aplicando el filtro MotionBlur a un objeto se produce en él un efecto de estar en movimiento rápido:
    11. Original Transformación
      Aspecto original
      Aspecto con Filtro MotionBlur
      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 MaskBlur como una clase asociada a dicho contenedor:

      #containerMotionblur1{
      width: 90%;
      -ms-filter: "progid:DXImageTransform.Microsoft.MotionBlur(strength=30)";
      filter: progid:DXImageTransform.Microsoft.MotionBlur(strength=30);
      }

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

      <div id="containerMotionblur1" >
      <img src="images/vela.gif" alt="Aspecto con Filtro MotionBlur" />
      </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.MotionBlur(strength=30)';
      filter: progid:DXImageTransform.Microsoft.MotionBlur(strength=30);">
      ... </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="containerMotionblur1" src="images/vela.gif" alt="Aspecto con Filtro MotionBlur" /></div>

      Atributos / Propiedades
      Atributo /
      Propiedad
      Valores Descripción Por defecto
      enabled
      • true
      • false
      Determina si el filtro está habilitado. true
      add
      • true
      • false
      Define si la imágen en movimiento se solapa con la imágen original. false
      direction
      • 0
      • 45
      • 90
      • 135
      • ...
      • 360
      Ängulo de la dirección en que se propaga el efecto MotionBlur. 270
      strength
      • true
      • false
      Determina con qué intensidad (distancia en pixels) se propaga el efecto. false


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