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

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
    12. 2.12 Wave: El filtro Wave simula un efecto de onda sinusoidal de (simulando la propagación del agua) sobre el objeto al que se aplica:
    13. Original Transformación
      Aspecto original
      Aspecto con Filtro Wave
      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 Wave como una clase asociada a dicho contenedor:

      #containerWave1{
      width: 90%;
      -ms-filter: "progid:DXImageTransform.Microsoft.Wave(freq=5, lightStrength=5, phase=20, strength=5)";
      filter: progid:DXImageTransform.Microsoft.Wave(freq=5, lightStrength=5, phase=20, strength=5);
      }

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

      <div id="containerWave1" >
      <img src="images/vela.gif" alt="Aspecto con Filtro Wave" />
      </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.Wave(freq=5, lightStrength=5, phase=20, strength=5)';
      filter: progid:DXImageTransform.Microsoft.Wave(freq=5, lightStrength=5, phase=20, strength=5);">
      ... </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="containerWave1" 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. false
      add
      • true
      • false
      Especifica si la imágen deformada por el filtro solapará a la imágen original. false
      freq
      • 1
      • 2
      • ...
      • (entero > 0)
      Especifica el número de ondas a aplicar al objeto. 3
      lightStrength
      • 0
      • ...
      • 100
      Mide la diferencia de intensidad de la luz entre los picos y los valles de la sinusoide producida por la aplicación del efecto. 100
      phase
      • 0
      • ...
      • 100
      • (Porcentaje implícito)
      Establece en qué posición se inicia la sinusoide. 0
      strength
      • 1
      • 2
      • ...
      • (enteros > 1)
      Mide la intensidad (distancia en pixels) con que se propaga la onda. 1


Filtros:
Filtro Anterior Alpha Basic Image Blur Drop Shadow Emboss Engrave
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