Color con opacidad en css3

22 Abr

Con css3 la opacidad o transparencia es muy fácil de lograr. En primer lugar utilizaremos la propiedad background-color y dos cajas, una azul y otra roja, pero ésta última será transparente, lo que nos permitirá ver parte de la caja a través de ésta.

 

 

 

 

 

Bien, continuemos. Para mostrar el siguiente ejemplo el color al que le aplicaremos la opacidad lo escribiré en formato rgb a diferencia de como normalmente lo pongo ya sea en formato hexadecimal o con el nombre en inglés. Para convertir color hexadecimal a rgb podemos hacerlo desde esta página:

http://serennu.com/colour/hsltorgb.php

Que también nos permitirá obtener el color hsl, otras de las posibilidades que nos da css3 para indicar el color. Por ejemplo si yo quisiera lograr un color azul debería ingresar en el campo que dice Hex #: 0000FF y luego pulsar el botón “Convert”

 

 

 

Cuando ingresamos una propiedad como background-color en css3 podemos indicarle el color con rgb o rgba. La diferencia entre ambos es que el primero nos da la posibilidad de ingresar sólo el color rgb (red, blue, green) mientras que rgba también nos da la posibilidad de ingresar el alpha (la opacidad o transparencia)

Para definir un color sin opacidad tendríamos algo como esto:

background-color: rgb(255, 0, 0);

Que nos devolvería un rojo, pero si a ese rojo queremos agregarle opacidad:

background-color: rgba(255, 0, 0, .5);

El cuarto valor es el que definirá el nivel de opacidad, los niveles van desde 0.0 a 1.0.

También podríamos usar de la misma manera hsl o hsla, en este último caso si quisiéramos definir opacidad.

Sin opacidad:

background-color: hsl(0, 100%, 50%);

Con opacidad:

background-color: hsla(0, 100%, 50%, .5);

El código para lograr los dos cuadrados de la imagen sería éste:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
    <meta charset="utf-8">
    <title>Aca va el titulo de la pagina</title>
    <style type="text/css">
       #caja_azul, #caja_roja {
          position: absolute;
          width: 100px;
          height: 100px;
       }
       #caja_azul {
          background-color: rgb(0, 0, 255);
          top: 10px;
          left: 10px;
       }
       #caja_roja {
          background-color: rgba(255, 0, 0, .5);
          top: 50px;
          left: 50px;
       }
    </style>
 </head>
 <body>
    <div id="caja_azul"></div>
    <div id="caja_roja"></div>
 </body>
</html>

Otra alternativa más fácil que no depende del color sino del elemento en sí es la propiedad opacity. Por ejemplo, podríamos cambiar esto:

#caja_roja {
   background-color: rgba(255, 0, 0, .5);
   top: 50px;
   left: 50px;
}

Por esto:

#caja_roja {
   background-color: rgb(255, 0, 0);
   top: 50px;
   left: 50px;
   opacity: 0.5
}

 

Redes sociables

    Deja un comentario

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


    *