transparencia

Una de las penurias de todo desarrollador web es obtener consistencia en la presentación de contenidos independientemente del navegador. Una de estas inconsistencias es el modo en que cada navegador gestiona las transparencias de imágenes y objetos.

Pues bien, si quieres aplicar transparencia a un elemento, independientemente del navegador, puedes conseguirlo añadiendo unas líneas de CSS al mismo:

CSS:
  1. elemento {
  2.     filter: alpha(opacity=50); /* internet explorer */
  3.     -khtml-opacity: 0.5;      /* khtml, version anterior de safari */
  4.     -moz-opacity: 0.5;       /* firefox, mozilla, netscape */
  5.     opacity: 0.5;           /* safari, chrome, opera */
  6.        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /*internet explorer 8 - gracias Andres */
  7.     }

Por supuesto, debes acordarte de modificar el "elemento" por el que vayas a adaptar, y saber también que puedes jugar con los distintos niveles de opacidad hasta encontrar el que se ajuste al aspecto que quieres conseguir.

Compartir en Tuenti Transparencias en todos los navegadores mediante CSS


También te puede interesar :

    12 comentarios en “Transparencias en todos los navegadores mediante CSS”

  1. Información Bitacoras.com...

    Si lo deseas, puedes hacer click para valorar este post en Bitacoras.com. Gracias....

  2. FeR (11 comentarios) dijo:

    Iba a comentar que ya había visto algo parecido en CSS Blog, pero no con esa foto. Se agradece, que hace que uno preste más atención al post xD

  3. aNieto2k (16 comentarios) dijo:

    Te has dejado el de IE8
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

    Saludos

  4. malder (8 comentarios) dijo:

    jeje, cuidado que puedes tener problemas con adsense!

  5. Daniel M. (3 comentarios) dijo:

    Para los estrictos con la validación de los estándares, creo que las propiedades "opacity" no la cumplen. Lo tenía en el plugin de "sociable" y daba errores de CSS.

  6. David (43 comentarios) dijo:

    Joer vaya fotito, y encima me molan las orientales..... madre mia....de que iba el post por cierto

  7. [...] Transparencias en todos los navegadores mediante CSS [...]

  8. Que buena la foto, incluso más que la información

  9. Diego (43 comentarios) dijo:

    Haré este cambio a ver si empiezo a ver las fotos así :P

    Gracias por el dato!

  10. Juan (38 comentarios) dijo:

    Hola, estoy aplicando las tranparencias a un menu desplegable. En internet explorer 8 me funciona una sola vez al pasar por arriba ya yadespués no vuelve a funcionar la tranparencia, obviamente solo si alcualizo la página. Qué puedo estar haciendo mal?

    Saludos y estaré muy agradecido si puedieran ayudarme.

Escribe un Comentario

Conectar con Facebook

XHTML: Puedes usar estos códigos: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>



Subir

Participa en el Debate
  • victor: Yo diria que de las 4 horas que dura el video, 30 minutos son realmente necesarios, la...
  • Jepser Bernardino: La búsqueda avanzada en wordpress yo la he hecho con hidden fields donde puedo...
  • '-Rodrigo Alcoba: Yo pude :D probe en otro navegador y anduvo, se puede scar el logo que dice...
  • Mariano | Posicionamiento: Llevaba un tiempo buscando algo así. Funciona y de maravilla. Como...
  • Álvaro Felipe: A ver, desde que WordPress es opensource puede modificarse el código con lo cual...
Noticias Breves
  • El prestigioso diseñador web Rodrigo Galíndez, una vez más nos deleita con un impecable theme WordPress, de calidad premium, pero 100% gratis. Se trata de Modernist, de sutiles detalles minimalistas, con espacios equilibrados y un manejo profesional del blanco. Podés ver la demo y descargarlo aquí.

    [#5]

  • Si usas el plugin Simple Twitter Connect debes saber que desde hace un rato ya está disponible una actualización que incorpora el nuevo botón oficial de Twitter para compartir contenido.

    [#3]

  • Casi sin previo aviso está disponible WordPress 3.0.1 para descarga, de momento solo en inglés, en el sitio oficial. Esta actualización soluciona una cincuentena de pequeños fallos y poco más.

    [#14]


  • Ahora mismo en los FOROS ...
    Únete a la comunidad
    Usuarios Registrados
  • Acceder

  • Translate this Blog
    Spanish flagItalian flagChinese (Simplified) flagPortuguese flagEnglish flagGerman flagFrench flagJapanese flagRussian flagSwedish flagCatalan flagHebrew flag