18 marzo 2009

Hacer un elemento HTML transparente (CSS opacity)

Hacer un elemento HTML transparente es algo muy útil cuando por ejemplo deseas que el usuario vea un area de escritira muy atractiva cuando en realidad va a usar un simple: . La solución viene del lado de CSS, pero como siempre hay problemas entre browsers, y siguiendo las recomendaciones del mozilla developer center presentó lo siguiente:
Digamos que quiero que un DIV sea transparente, entonces se deberá crear la siguiente regla CSS para lograr eso tanto para FireFox como para IE.
div.transp { /* make the div translucent */
opacity: 0.6;
filter: "alpha(opacity=60)"; /* expected to work in IE 8 */
filter: alpha(opacity=60);   /* IE 4-7 */
zoom: 1;                     /* needed in IE up to version 7, or set width or height to trigger "hasLayout" */
}
Así de simple se logra transformar un DIV normal en un DIV semi-transparente para FF y IE.
Referencias:

6 comentarios:

  1. Y Como hago para agregar una caja de comentarios en una plantilla modificada a tres columnas?? Buen Blog!

    ResponderEliminar
  2. Muchas gracias. Me sirvió. Abrazo.

    ResponderEliminar
  3. Donde se debe de insertar ese Codigo en la Palntilla Amigo

    ResponderEliminar
    Respuestas
    1. Tienes 3 opciones, directamente en el atributo style (https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/style), declarar las reglas CSS en el HTML directamente con la etiqueta STYLE (https://developer.mozilla.org/es/docs/Web/HTML/Elemento/style) y la mejor dejar este codigo en un archivo CSS enlazado a tu HTML.

      Eliminar