Transparencia | Oloblogger Lo de hacer un elemento semitransparente es relativamente fácil: sólo se trata de añadirle un atribu...

10 de julio de 2009

Transparencia

Lo de hacer un elemento semitransparente es relativamente fácil: sólo se trata de añadirle un atributo que indica tal cosa. Los problemas empiezan cuando encontramos que la transparencia es tratada por cada navegador de una manera distinta. Y ya no me refiero a diferencias entre Firefox, Internet Explorer, Opera, Chrome, Safari... si no que hay diferencias de interpretación incluso entre versiones.

En realidad, deberíamos hablar más bien de opacidad, porque así es como lo tratan la mayoría de navegadores. Podemos definir una opacidad del 100% para figuras totalmente opacas u otro valor inferior para distintos grados de imágenes traslúcidas. Olvidaros del 0% porque para ponerlo transparente del todo creo que mejor no lo ponemos ;)

Los distintos códigos que conozco en versión CSS son:
  • Internet Explorer --> filter:alpha(opacity=100);
  • Internet Explorer 8 -->
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  • Firefox, Netscape, Mozilla --> -moz-opacity:0.1;
  • Opera, Safari, Chrome --> opacity: 0.1;
  • Khtml --> -khtml-opacity: 0.1;
IE fija la opacidad desde 0 (totalmente transparente) hasta 100 (totalmente opaco). El resto respectivamente entre 0 y 1. Para IE 6 no conozco ningún atributo que funcione.

Así las cosas y para evitar problemas, lo mejor que no lo más práctico, será añadir a nuestra etiqueta STYLE, todos los códigos conocidos:

<img style="-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);filter:alpha(opacity=50);-moz-opacity:0.5;opacity: 0.5;-khtml-opacity: 0.5;" src="URL_IMAGEN"/>

Todavía no he aprendido el orden exacto en que hay que redactar códigos para distintos navegadores, pero en este caso, el código de IE8 debe ir obligatoriamente delante del de los otros IE, así que ojito con cambiarlos de orden. Si alguien conoce otros atributos que sean comunes a más navegadores u otra forma de ordenarlos para optimizar el resultado, sería eternamente agasajado.

Cuando vayamos a utilizar con cierta frecuencia el efecto de transparencia, lo más cómodo será crear una clase... o varias:

.transparencia80 {
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
filter:alpha(opacity=80);
-moz-opacity:0.8;
opacity: 0.8;
-khtml-opacity: 0.8;
}

.transparencia60 {
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60);
filter:alpha(opacity=60);
-moz-opacity:0.6;
opacity: 0.6;
-khtml-opacity: 0.6;
}


Luego sólo habría que aplicar la clase deseada al elemento que queramos: DIV, IMG, LI,... Por ejemplo:

<div class='transparencia50'>
Texto
</div>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


Por último otra manera algo más farragosa cuando hay que usarla para muchos elementos, pero que no falla con ningún navegador: con eventos Javascript. Así de paso le metemos un fácil rollover.

<img style="opacity:0.3;filter:alpha(opacity=30)" onmouseover="this.style.opacity=0.7;this.filters.alpha.opacity=70" onmouseout="this.style.opacity=0.3;this.filters.alpha.opacity=30" src="URL_IMAGEN" />


¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

11 comentarios :

  1. Pero esto no es antiestandar?

    Salu2

    ResponderEliminar
  2. Seguro que lo es PDD20, pero las soluciones alternativas creo que no merecen la pena. Todavía nadie me ha explicado para qué sirve tener una página 100% validada si cada navegador hace con los estándares lo que le da la gana.

    ResponderEliminar
  3. Pues por explicarlo todo tan facil y para Blogger, y porque me gusta como lo dices, mi voto para ti en los premios 20 Blogs...
    Y si, el que no llora...
    Un saludo!
    El Mar No Cesa.

    ResponderEliminar
  4. "Has votado a este blog en esta categoría".

    Pues eso: un voto más. A seguir así.

    Un saludo.

    ResponderEliminar
  5. Hey, primero felicitarte por el blog, es la primera vez que entro y me estoy quedando alucinado de la gran variedad de cosas que se le puede hacer a un blog.

    Te comento una duda:

    Tengo una plantilla descargada y no quiero estropearle la cabecera, por lo tanto tengo el titulo escrito con las fuentes predeterminadas. Me gustaria que me explicases como recortar una imagen para que lo restante se quedara transparente (es decir opacidad 0) y poder sustituirlo por dicha fuente. Es decir como la primera imagen que tienes en el post.

    Si no me has entendido bien te ruego que te pongas en contacto conmigo.

    Muchas gracias y a seguir asi!

    http://www.pirapnhas.blogspot.com

    ResponderEliminar
  6. Hmmm... No sé si es exactamente esto lo que preguntas, pero tienes que utilizar un editor de imágenes (Photofiltre, Gimp, Photoshop, etc.) y con él podrás manipular la imagen. Primero seleccionas (normalmente por color) la parte a quitar y una vez marcada la borras. Luego grabas la imagen como GIF para que te guarde la parte sin contenido como transparente.

    ResponderEliminar
  7. hola olo, mi consulta es media pretenciosa, necesito hacer es modificar u omitir el panel de blogger para asi limitar a algunos usuarios solamente a crear o modificar los post sin la necesidad que me muestre aspectos tecnicos... si me pudieras orientar te agradeceria. se bastante de html y css. gracias

    ResponderEliminar
  8. A ver si lo entiendo... Tiene un blog compartido y quieres que el resto de autores sólo tengan acceso a las entradas ¿es así? Pues para eso sólo tienes que invitarlos al blog pero sin hacerlos administradores.
    Saludos.

    ResponderEliminar
  9. hola olo, mas o menos es lo que me recomendas, pero para ser mas especifico me gustaria ocultar la plataforma blogger, armarme un administrador propio con mi diseño. saludos olo

    ResponderEliminar
  10. Yo sólo entiendo un poco de Blogger. De todas formas, una opción es comprar un dominio y redireccionar tu blog Blogger a esa dirección. El panel, el control de los autores y prácticamente todo, será lo mismo que ahora, pero la dirección será la tuya. En Blogger seguro que puedes hacer lo que dijiste: diseño propio y autores sin administración.

    ResponderEliminar