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.

Te recomendamos ver:  Ejemplos y ejercicios resueltos CSS3

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.

Te recomendamos ver:  Animaciones en CSS3
Curso css3 - temas
0 0 votar
Calificación
guest
0 Comentarios
Comentarios en línea
Ver todos los comentarios

Ahora tienes el curso de CSS3 completo, organizado y estructurado en temas de tal manera que puedas aprender lo más rápido y fácil posible.

Temas del curso CSS3

 

1. Introducción a CSS3
2. Sombras para texto en CSS3
3. La propiedad Word-wrap
4. La regla @ font-face
5. Border-radius: Esquinas redondeadas con CSS3
6. Sombras para cajas con CSS3
7. Degradados y fondos en CSS3
8. Imágenes de fondo con CSS3 background-size
9. La propiedad opacity de CSS3
10. Pseudo-clases y pseudo-elementos de CSS3
11. Transiciones en CSS3
12. Transformaciones en CSS3
13. Animaciones en CSS3
14. Filtros CSS3
15. Ejemplos y ejercicios resueltos CSS3

Te puede interesar

Curso CSS

1.- Qué es CSS y Introducción
2.- Cómo usar CSS
3.- Selectores CSS – Reglas y sintaxis
4.- Cascada de estilos y herencia
5.- Estilos CSS para textos
6.- Ancho y alto
7.- Modelo de cajas
8.- Las propiedades: border, padding y margin
9.- La propiedad Background
10.- Estilo para listas
11.- Estilos CSS para tablas
12.- Estilos para enlaces CSS
13.- Personalizando el cursor
14.- Propiedad display y visivility
15.- Posicionamiento en CSS
16.- La propiedad overflow
17.- Propiedad Z-INDEX en CSS
18.- Ejemplos y ejercicios resueltos

 

Ahora tienes el curso de CSS3 completo, organizado y estructurado en temas de tal manera que puedas aprender lo más rápido y fácil posible.

Temas del curso CSS3

 

1. Introducción a CSS3
2. Sombras para texto en CSS3
3. La propiedad Word-wrap
4. La regla @ font-face
5. Border-radius: Esquinas redondeadas con CSS3
6. Sombras para cajas con CSS3
7. Degradados y fondos en CSS3
8. Imágenes de fondo con CSS3 background-size
9. La propiedad opacity de CSS3
10. Pseudo-clases y pseudo-elementos de CSS3
11. Transiciones en CSS3
12. Transformaciones en CSS3
13. Animaciones en CSS3
14. Filtros CSS3
15. Ejemplos y ejercicios resueltos CSS3

Te puede interesar

Curso CSS

1.- Qué es CSS y Introducción
2.- Cómo usar CSS
3.- Selectores CSS – Reglas y sintaxis
4.- Cascada de estilos y herencia
5.- Estilos CSS para textos
6.- Ancho y alto
7.- Modelo de cajas
8.- Las propiedades: border, padding y margin
9.- La propiedad Background
10.- Estilo para listas
11.- Estilos CSS para tablas
12.- Estilos para enlaces CSS
13.- Personalizando el cursor
14.- Propiedad display y visivility
15.- Posicionamiento en CSS
16.- La propiedad overflow
17.- Propiedad Z-INDEX en CSS
18.- Ejemplos y ejercicios resueltos