JMiur [E]

Las transparencias están de moda y con variantes, pueden usarse en todos los navegadores. Una de las nuevas posibilidades del CSS3 es el uso de "transparencias" en los colores y para eso existe una forma especial de escribir esos valores.

Un color dado, puede ser expresado en diferentes formatos; por ejemplo, el color rojo:
color: #FF0000;
color: rgb(255,0,0);
color: rgb(100%,0%,0%);
color: red;
A estas posibilidades, se le sumaron dos más, el llamado rgba() (Red Green Blue Alpha):
color: rgba(255,0,0,1);
y el formato llamado hsla() (Hue Saturation Lightness Alpha)
color: hsla(0,100%,50%,1);
Si los usamos, todos se verán iguales porque son el mismo color pero los dos últimos son ignorados en Internet Explorer ya que, por ahora, no admite estos formatos.


Sin embargo, IE dispone de filtros que podemos usar para tratar de equiparar las cosas y con ellos, simular el formato rgba().

El filtro que debemos usar es gradient ya que, el color de inicio y color final, admiten un cuarto valor que es, justamente, el valor de alpha o sea, la transparencia. La propiedad tiene esta sintaxis:
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#VALOR,endColorstr=#VALOR);
Normalmente, los valores que pondríamos son dos diferentes para que se creara una gradiente de colores pero, nada impide poner el mismo color en ambos; esto, lo mostraría todo rojo:
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF0000,endColorstr=#FF0000);
Y, como acepta un cuarto valor hexadecimal (entre 00 y FF) que indica la transparencia, podríamos poner esto para que sea equivalente a un 50% de opacidad:
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#80FF0000,endColorstr=#80FF0000);
Supongamos un color cualquiera como #FF8000; podemos usar el mismo color con diferentes transparencias; por ejemplo, este es el color "normal":
background-color:rgba(255,128,0,1)
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFFF8000,endColorstr=#FFFF8000);
y este es el mismo color con un 50% de transparencia:
background-color:rgba(255,128,0,0.5)
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#80FF8000,endColorstr=#80FF8000);
Aquí vemos una serie de rectángulos que usan ese sistema, todos tienen el mismo color y lo que va variando es su opacidad:


Lo podemos aplicar como cualquier otro efecto aunque los filtros de IE están limitados a bloques, es decir, etiquetas que tengan una dimensión y no pueden usarse en etiquetas inline:

efecto onmouseover
<style>
a.demoRGBA {
background-color: #FFFF00; /* el color de fondo "normal" */
border: 5px solid #FF0000;
color: #00A0FF;
display: block;
margin: 0 auto;
font-size: 20px;
padding: 10px;
text-align: center;
width: 250px;
}
a.demoRGBA:hover {
color: #FFF;
/* el color de fondo transparente para IE */
background-color: transparent;
/* el color de fondo usando rgba() */
background-color: rgba(255, 255, 0, 0.5);
/* el filtro de IE */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#80FFFF00,endColorstr=#80FFFF00);
}
</style>

<a class="demoRGBA" href="#">efecto onmouseover</a>

7 comentarios:

Unknown  

Desconocía el formato llamado hsla.

Muy bueno Jmiur, para guardar y practicar :)

Responder
La hormiguita  

Que bárbaro!!!! Muy interesante!!!! :)

Responder
Unknown  

Otra clase magistral... Gracias!!!

Responder
JMiur  

Pues yo tampoco conocía el formato hsla. Es interesante esto del RGBA :D

Responder
Luis Hernández Mairena  

Muchas gracias por el post, me saco de un apuro con un sitio que le aplique rgba y no lo reconoce el explorer. Muy buena información

Responder
sergio  

y que valor le tengo q dar para que sea 70 porciento de opacidad

JMiur  

Es pura aritmética, si:

si hexadecimal 80 = decimal 128 = 50% --> 256*.5 = 128

256*.7 = aproximadamente a decimal 179 o headecimal B3

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR