La propiedad opacity de CSS3

Ahora conoceremos la propiedad CSS que nos permita controlar la transparencia u opacidad de un elemento HTML, se trata de la propiedad opacity es bastante fácil de usar, veamos cómo podemos poner transparencia, es decir controlar la opacidad, qué valores puede tomar y varios ejemplos prácticos, en elementos como contenedores, imágenes, texto, etc.  

Cambiar la transparencia con CSS3

Cambiar el grado de transparencia de un elemento puede ser una de las aplicaciones más geniales de  la propiedad opacity, podemos hacer que un elemento se vuelva totalmente transparente y opaco, cuando dotamos de transparencia a un elemento podemos visualizar otros elementos que pueden estar ubicados detrás de ellas.

La propiedad opacity

La propiedad opacity de CSS3 nos permite ponerle opacidad a un elemento cualquiera, o si prefieres llamarlo transparencia, a continuación veamos que valores puede tomar.

Valores de opacity CSS3

Los valores que puede tomar la propiedad opacity son numéricos, sin unidades, que pueden ir del 0 al 1,  es decir puede tomar valores intermedios. Un valor de cero 0, hará que el elemento se vuelva totalmente transparente y un valor de uno 1 hará que el elemento sea totalmente opaco. Valores intermedios tendrán un efecto proporcional.

Ejemplos de Opcacity

A continuación veremos varios ejemplos de código CSS aplicando transparencia u opacidad a diversos elementos para que veas cómo funciona esta propiedad, tú puedes ver el resultado ejecutando los códigos mediante el icono de reproducción que se encuentra en la esquina superior derecha de cada bloque de código.

Poner opacidad o transparencia a un contenedor

Ejemplo 1.- En el siguiente ejemplo tenemos un bloque rojo dentro de un bloque azul, crearemos un código CSS para ponerle dimensiones y color a cada cloque, finalmente colocaremos una opacidad de 0.3 al elemento rojo, de tal manera que detrás de ella será posible observar parte del bloque azul. Además podemos distinguir claramente cómo la propiedad opcacity afecta al bloque rojo. Veamos.

<div class="azul"><div class="rojo"></div></div>
<style>
  div.azul {
    width:100px;
    height: 200px;
    background: blue;
  }
  div.rojo {
    width:200px;
    height: 100px;
    background: red;
    opacity:0.3;
  }
</style>

Opacidad y transparencia de imagen con CSS3

Ejemplo 2.- en este ejemplo pondremos cierta transparencia a una imagen, es muy simple, tenemos la mimas imagen, pero con distintos identificadores para poderlas diferenciar, la segunda imagen tiene una opacidad de 0.4, esto lo hace algo transparente. A continuación observa el resultado y si deseas puedes cambiar y probar con diversos valores.

<div>
  <img class="original" src="https://cdn.pixabay.com/photo/2015/05/19/07/44/browser-773215_960_720.png"/>
  <img class="transparente" src="https://cdn.pixabay.com/photo/2015/05/19/07/44/browser-773215_960_720.png"/>
</div>
<style>
  img {
    width:150px;
    height:150px;
  }
  .transparente {
    opacity:0.4;  
  }


</style>

Poner transparencia a un texto CSS

Ejemplo 3.- Ahora se trata de un elemento de texto, específicamente de un elemento de párrafo <p>, el primer párrafo no tiene ninguna opacidad, pero para el segundo estableceremos una opacidad de 0.4 (opacity:0.4;), de tal manera que se vuelva un poco transparente. Ejecuta el código y observa el resultado.

<p class="original">Párrafo original sin ninguna opacidad.</p>
<p class="transparente">Párrafo con efecto de transparencia al 0.4</p>

<style>
  p {
    font-size:30px;
    font-weight:bold;
    color: #1a157d;
  }
  .transparente {
    opacity: 0.4;
  }
</style>

Listo, hemos llegado al final de esta lección, espero que hayas aprendido y disfrutado tanto como yo lo he hecho al crear esta lección sobre la propiedad opacity de CSS3, ahora puedes avanzar a la siguiente lección para seguir aprendiendo CSS3.

[popup_anything id=»5821″]