CSS

Cómo crear Transparencias con CSS

Transparencias en CSS
Disponemos de dos ordenes CSS para realizar transparencias: opacity y background con rgba

Si alguna vez has querido crear un efecto de transparencia en tu página web, tienes suerte, ya que esto es posible gracias a CSS y no es una orden muy complicada.

Para ello utilizaremos la propiedad de CSS opacity.

Cómo utilizar la propiedad Opacity

La propiedad CSS Opacity tiene esta forma:

#capa {
   opacity: 0.5;
}

Aquí hemos supuesto que queremos añadir un 50% de transparencia a una capa imaginaria que le hemos puesto el id capa.

El valor de opacity puede ir de 0 a 1 y será el % de opacidad que queramos añadir a la capa que hemos seleccionado.

Tener en cuenta que opacidad es lo contrario a transparencia, 100% de transparencia supone un 0% de opacidad.

Ejemplos con distintas transparencias

[one_fourth]opacity: 0.25;[/one_fourth][one_fourth]opacity: 0.5;[/one_fourth][one_fourth]opacity: 0.75;[/one_fourth][one_fourth_last]opacity: 1;[/one_fourth_last]

Código del ejemplo:

#ejemplo-opacity .one_fourth {
    background-color: #00a888; 
    padding: 40px 0; 
    text-align: center; 
    color: white;
}

#ejemplo-opacity div.one_fourth:nth-child(1) {
    opacity: 0.25;
}

#ejemplo-opacity div.one_fourth:nth-child(2) {
    opacity: 0.5;
}

#ejemplo-opacity div.one_fourth:nth-child(3) {
    opacity: 0.75;
}

Las cajas se vuelven más clara con valores más bajos de opacity, esto sucede por que el fondo es blanco.

Como puedes ver en el ejemplo, 1 de opacity (opacidad) no añade ninguna transparencia y el % de transparencia irá aumentando a medida que nos acercamos más al 0. Donde 0, significaría volver la capa totalmente transparente.
[one_half]Algo que hay que tener en cuenta con la orden opacity es que añade transparencias a la capa que seleccionamos y a todo lo que tiene, es decir, que si tenemos un “bloque” y queremos que este bloque sea transparente pero que no afecte al texto que tenga en su interior… no podremos utilizar opacity. Tendremos que recurrir a otro recurso.[/one_half]

[one_half_last]El texto también se vuelve transparente, era de color negro pero ahora se ve grisáceo debido a una transparencia del 50%[/one_half_last]

El problema viene cuando queremos que el “contenedor” de nuestra capa o el fondo sea transparente pero no queremos que los elementos dentro de este se vean afectados, como por ejemplo los textos.

Transparencia en el fondo pero no en los textos

Y esto se aplica tanto a los textos como a cualquier cosa visible que tengamos sobre la capa que seleccionemos. Si lo que queremos es que únicamente el fondo o contenedor de nuestra capa se vuelva transparente tendremos que utilizar una propiedad de background.

Background con Transparencia

Para conseguir un background con transparencia tenemos que utilizar la propiedad background con rgba, el problema de esto es que algunos navegadores sobretodo si no los actualizamos pueden no soportar esta orden. Por ello es conveniente para estos casos utilizar la propiedad background con código hexadecimal o rgb.

Así es como sería:

#capa {
    background: rgba(0,168,136,0.5);
}

Cada número dentro del paréntesis tiene un significado, los tres primeros números representad la cantidad de rojo, verde y azul (RGB => Red, Green, Blue). El último valor sirve para añadir la opacidad.

En este caso he utilizado el mismo color turquesa que al principio del post (#00a888) que está en hexadecimal, lo he pasado a rgb, simplemente hay que pasar a decimal cada bloque de números: 00, a8, 88. Podéis comprobarlo con una calculadora informática.

Y así es como quedaría, os dejo de paso la diferencia entre utilizar opacity y background con rgba:

[one_half]Capa con opacity[/one_half][one_half_last]Capa con background: rgba[/one_half_last]

Código del ejemplo

#ejemplo-opacity-bg .one_half {
    padding: 40px 0; 
    text-align: center;
}

#ejemplo-opacity-bg .one_half:nth-child(1) {
    background-color: #00a888; 
    opacity: 0.5;
}

#ejemplo-opacity-bg .one_half:nth-child(2) {
    background: rgba(0,168,136,0.5);
}

Con esto ya ves que hemos solucionado el problema de que el texto también se transparente.

¡Y eso es todo por hoy!

Espero que con esto consigas dominar las transparencias en css, la verdad es que bien utilizadas quedan genial.

¡Hasta la próxima entrada!

Give a Comment