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

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: Modifica el aspecto del objeto haciendole borroso, como si estuviera fuera de foco:
    4. Original Transformación
      Aspecto original
      Aspecto con Filtro Blur
      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 Blur como una clase asociada a dicho contenedor:

      #containerBlur1
      {
      width: 90%;
      -ms-filter: "progid:DXImageTransform.Microsoft.Blur(pixelRadius=3)";
      filter: progid:DXImageTransform.Microsoft.Blur(pixelRadius=3);
      }

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

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

      Finalmente, se puede embeber el filtro dentro del código HTML del elemento (mediante style), con lo que ya no sería necesario identificarle con un id:

      <div class="ejAreas1" style="width: 90%; -ms-filter: 'progid:DXImageTransform.Microsoft.Blur(pixelRadius=3)'; filter: progid:DXImageTransform.Microsoft.BasicImage(XRay=1); ">... </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="containerBlur1" src="images/vela.gif" alt="Aspecto con Filtro Blur" /></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
      pixelRadius
      • 1
      • ...
      • 100
      Especifica el tamaño del pixelado con que se hará borroso el objeto.
      makeShadow, ShadowOpacity
        makeShadow
      • true
      • false
        makeShadow
      • Color en formato ARGB
      • (ej: 0xEE99FFDD)
      Determina si se mostrará objeto con sombra.


Filtros:
Filtro Anterior Alpha Basic Image Blur Drop Shadow Emboss Engrave Siguiente Filtro
Glow Light Mask Filter Motion Blur 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