Aranda de Duero, Burgos, España

610 23 28 39 info@robertoleon89.com

Trasparencias con CSS3

La transparencia lleva ya unos años entre nosotros con HTML4, e incluso en Internet Explorer utilizaba transparencias con filtros propios.

CSS3 soluciona uno de los mayores problemas, añadiendo a los colores el canal ∝ (alfa), lo que a partir de ahora cada color se determina por los canales RGB (Red, Green, Blue o en castellano Rojo, Verde y Azul) y el canal ∝ (opacidad).

El valor de ∝ puede tener cualquier valor entre 0 y 1, ambos inclusive [0-1], siendo 0 transparente, y 1 opaco.

A dichos colores se les llama RGBA, y se inician de la siguiente forma:

rgba(255, 255, 0, 0.5); -> Amarillo con opacidad del 50%

Otra forma que tenemos para definir un color, es la de HSLA, en la que por cada color se determina: el tono, la saturación, la luminosidad y el canal ∝. El valor del tono puede tomar un valor entre 0 y 359 (ambos inclusive), la saturación y la luminosidad toman un tanto por ciento %, y el canal ∝ puede tomar un valor entre 0 y 1, ambos inclusive. Un ejemplo es el siguiente:

hsla(23, 100%, 50%, 0.6); -> Color naranja con el 60% de opacidad.

Si lo que queremos es disolver no es un color, si no, que es un elemento como una imagen, el atributo que nos ofrece el es el de opacity pudiendo tomar cualquier valor entre 0 y 1, ambos inclusive [0-1]. Un ejemplo sería el siguiente:

img{

opacity : 0.5; -> Opacidad del 50%

}

 

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *