Transición de opacidad usando CSS
-
el Atributo
opacidad -
el Atributo
transición - Agregar transición de opacidad a un botón usando CSS
- Agregar transición de opacidad a una imagen y texto usando CSS
- Conclusión
Las hojas de estilo en cascada, también conocidas como CSS, son un lenguaje en el que podemos diseñar páginas web junto con lenguajes de marcado como HTML y XHTML. CSS proporciona varios atributos para diseñar, y podemos agregarlos en un archivo CSS o dentro del archivo HTML o XHTML.
el Atributo opacidad
Uno de los atributos que proporciona CSS es la opacidad. La opacidad es la transparencia de un elemento: imágenes, formas o contenido.
Podemos agregar opacidad a un elemento usando la siguiente sintaxis.
Sintaxis:
Opacity: value
Aquí, el valor se refiere a cuánta transparencia debemos darle a ese elemento. Deberíamos darlo como un valor decimal, que debería estar entre 0 y 1.
0 significa que el elemento es completamente transparente y uno es completamente visible. Puede dar cualquier valor entre esos dos números para aumentar o disminuir la transparencia.
Por ejemplo, si desea la mitad de transparencia para el elemento, puede asignar 0,5 como su valor. Si necesita un elemento ligeramente visible, puede proporcionar 0,2 o 0,3.
Si desea un elemento apenas transparente, puede usar 0.8 o 0.7.
Opacity: 0.5;
el Atributo transición
Podemos usar el atributo transición en CSS si necesitamos dar una transición a un elemento. Este atributo tiene varias propiedades.
transition-delay |
Si necesita retrasar su transición, esta es la propiedad que necesita. |
transition-duration |
Esta propiedad especifica cuánto tiempo debe tardar en completarse una transición. |
transition-property |
Esta propiedad describe qué propiedades CSS deberían verse afectadas por el efecto de transición. |
transition-timing-function |
Puede utilizar esta propiedad para acelerar o ralentizar la transición. |
Este artículo discutirá cómo agregar una transición de opacidad a un elemento usando CSS. Debemos usar los atributos opacity y transition.
Tomaremos dos ejemplos. Como primer ejemplo, crearemos un botón como elemento y se agregará la transición de opacidad.
En el segundo ejemplo, agregaremos una transición de opacidad a una imagen y texto.
Agregar transición de opacidad a un botón usando CSS
Primero, creemos un botón usando HTML.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title>Opacity Transition</title>
</head>
<body>
<!-- creating the button -->
<div>
<button class="btn">Click Here</button>
</div>
</body>
</html>
Como en el código anterior, hemos creado un botón con una clase llamada btn.
Dale estilo al botón
Ahora agreguemos algunos estilos a nuestro botón usando CSS. Para este ejemplo, agregaremos los siguientes estilos al botón.
- Un fondo azul.
- Blanco como color de fuente y 30px como tamaño.
- 1 px de borde y 10 px como radio.
- Un relleno de 10px.
.btn{
background-color: blue;
color: white;
font-size: 30px;
border: 1px;
border-radius: 10px;
padding: 10px;
}
Así que ahora hemos terminado de diseñar nuestro botón.
Agregar transición de opacidad
Ahora, agreguemos la transición de opacidad al botón como se muestra a continuación.
.btn:hover{
opacity: 0.5;
transition-duration: 1s;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title>Opacity Transition</title>
</head>
<body>
<!-- creating the button -->
<div>
<button class="btn">Click Here</button>
</div>
</body>
</html>
El selector hover es una opción de tipo de pseudoclase que da CSS. Podemos seleccionar elementos cuando pasamos el cursor sobre ellos.
Entonces, como en el código anterior, cuando pasemos el mouse sobre el botón, será medio transparente ya que le dimos 0.5 como valor de opacidad. Hemos proporcionado 1 segundo como la duración de la transición para ver la transición más claramente.
Ahora, cuando pasamos el mouse sobre el botón, su color será medio azul como se muestra a continuación.
Código CSS completo:
/* Styling the button */
.btn{
background-color: blue;
color: white;
border: 1px;
border-radius: 10px;
font-size: 30px;
padding: 10px;
}
/* Adding opacity transition */
.btn:hover{
opacity: 0.5;
transition-duration: .25s;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title>Opacity Transition</title>
</head>
<body>
<!-- creating the button -->
<div>
<button class="btn">Click Here</button>
</div>
</body>
</html>
Agregar transición de opacidad a una imagen y texto usando CSS
Insertar una imagen y texto
Intentemos agregar la transición de opacidad a una imagen y texto. Primero, necesitamos insertar una imagen usando HTML como en el fragmento de código a continuación.
<img class="img" src="/img/DelftStack/logo.png" alt="alternatetext">
Podemos poner el texto debajo de la imagen.
<p class="text">This is a picture</p>
Ahora nuestro código HTML debería verse así.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title>Opacity transition</title>
</head>
<body>
<div>
<!-- Inserting an image -->
<img class="img" src="/img/DelftStack/logo.png" alt="alternatetext">
<!-- Inserting a text -->
<p class="text">This is a picture</p>
</div>
</body>
</html>
Agregar estilos a imagen y texto
Podemos agregar algunos estilos para tener una imagen clara del proceso.
/* Styling the image */
.img{
width:25%;
display: block;
margin-left: auto;
margin-right: auto;
}
/* Styling the text */
.text{
text-align: center;
font-size: 20px;
margin-left: 45%;
margin-right: 45%;
}
Aquí hemos insertado la imagen en un tamaño más pequeño y la hemos centrado. Hemos establecido el tamaño de fuente para el texto y lo hemos centrado debajo de la imagen.
Agregar transición de opacidad
Ahora podemos configurar la transición de opacidad tanto para la imagen como para el texto usando el fragmento de código a continuación.
.img:hover, .text:hover{
opacity: 0.2;
transition-duration: .25s;
}
Código CSS completo:
/* Styling the image */
.img{
width:25%;
display: block;
margin-left: auto;
margin-right: auto;
}
/* Styling the text */
.text{
text-align: center;
font-size: 20px;
margin-left: 45%;
margin-right: 45%;
}
/* adding opacity transition*/
.img:hover, .text:hover{
opacity: 0.2;
transition-duration: .25s;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title>Opacity transition</title>
</head>
<body>
<div>
<!-- Inserting an image -->
<img class="img" src="/img/DelftStack/logo.png" alt="alternatetext">
<!-- Inserting a text -->
<p class="text">This is a picture</p>
</div>
</body>
</html>
Ahora cuando movamos el cursor sobre la imagen y el texto, ambos elementos serán ligeramente visibles ya que le hemos dado 0.2 como valor de opacidad.
Si desea ocultar los elementos (imagen y texto), puede establecer el valor de opacidad en 0.
Conclusión
Este artículo discutió cómo podríamos agregar una transición de opacidad a un elemento usando los atributos CSS: opacidad y transición. Para este tutorial, agregamos transición de opacidad a un botón, imagen y texto como ejemplos para explicar el proceso.
Nimesha is a Full-stack Software Engineer for more than five years, he loves technology, as technology has the power to solve our many problems within just a minute. He have been contributing to various projects over the last 5+ years and working with almost all the so-called 03 tiers(DB, M-Tier, and Client). Recently, he has started working with DevOps technologies such as Azure administration, Kubernetes, Terraform automation, and Bash scripting as well.