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

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

  1. Introducción:
  2. Mediante CSS's y algo de código Javascript se pueden establecer un cierto número de Filtros multimedia que se aplicarán en la renderización de objetos por el navegador dotando a la página que los contiene de un mayor atractivo. Funcionan en Internet Explorer, para versiones del navegador mayores que la 5.5.

  3. Catálogo de Filtros:
  4. A continuación describimos secuencialmente los 12 tipos de filtros que existen para IE y damos de cada caso un ejemplo de su efecto sobre una imágen y de su efecto sobre un elemento HTML.

    Finalmente describimos el código CSS / Javascript necesario para implementar cada filtro.

    1. 2.1 Alpha: Modifica la opacidad de una imágen o elemento HTML, dotándole de un cierto nivel de transparencia especifricado por parámetro:
    2. Original Transformación
      Aspecto original
      Aspecto con Filtro Alpha
      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

      Si el elemento al que queremos aplicar el efecto es una estructura HTML, debe estar contenida entre <div> </div>: así vamos a hacer con la tabla. El contenedor debe tener necesariamente un "id" único que le identifique:

      <div id="containerAlpha2" class="ejAreas1">
      <table class="rightArea2Table" cellspacing="2" cellpadding="2" width="120" border="0">
      <tr>
      <td class="rightArea2Header" valign="top"> Artículos</td></tr>
      <tr>
      <td class="rightArea2Cell" valign="top"> Discos</td></tr>...

      </table>
      </div>

      Y en la hoja de estilo asociada se le asigna el filtro correspondiente como una clase asociada a dicho contenedor:

      #containerAlpha1
      {
      width: 90%;
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=50)";
      filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);
      }

      Como se puede apreciar, el filtro se define dos veces en la misma regla. esto es debido a que la sintáxis es diferente para versiones de Internet Explorer inferiores o iguales a IE8 (1º formato) y para las superiores a IE8 (2º formato).

      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.Alpha(opacity=50)'; filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);">... </div>

      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="containerAlpha1" src="images/vela.gif" alt="Aspecto con Filtro Alpha" /></div>

      Atributos / Propiedades
      Atributo /
      Propiedad
      Valores Descripción Por defecto
      enabled
      • true
      • false
      Determina si el filtro está habilitado. true
      opacity
      • 0 (transparente total)
      • ...
      • 100 (opaco total)
      • (Porcentaje implícito)
      Define el nivel de opacidad. 0
      style
      • 0 (uniforme)
      • 1 (lineal)
      • 2 (radial)
      • 3 (rectangular)
      Define cual de los 4 tipos de opacidad se aplica. 0
      startX, finishX
      • 0
      • ...
      • 100
      • (Porcentaje implícito)
      Posición horizontal en la que empieza y termina el gradiente.
      Sólo se puede aplicar cuando style = 1
      0
      finishX, finishY
      • 0
      • ...
      • 100
      • (Porcentaje implícito)
      Posición vertical en la que empieza y termina el gradiente.
      Sólo se puede aplicar cuando style = 1
      0
      finishOpacity
      • 0 (transparente total)
      • ...
      • 100 (opaco total)
      • (Porcentaje implícito)
      Nivel de opacidad con la que termina el gradiente.
      Sólo se puede aplicar cuando style = 1
      0


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