En este artículo, crearemos una tarjeta transparente o borrosa utilizando las propiedades básicas de HTML y CSS . El efecto borroso también se llama efecto de cristal.
Acercarse:
- En la etiqueta del cuerpo , cree el diseño de la tarjeta.
- Defina las clases a cada uno de los componentes para usar las propiedades CSS.
- Para aplicar el efecto de vidrio o de desenfoque, use la propiedad de filtro de fondo para desenfocar la tarjeta.
Ejemplo: Cree una tarjeta de vidrio, borrosa o transparente utilizando el enfoque anterior. Como se mencionó en el primer paso, crearemos el diseño de la tarjeta debajo de la etiqueta del cuerpo.
HTML
<!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <div class="background"> <div class="card"> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" alt="image" /> <h1>GeeksforGeeks</h1> <h3>Happy Coding</h3> </div> </div> </body> </html>
En el código anterior, hemos creado una etiqueta div anidada que contiene una imagen y algo de texto y clases asignadas a estas etiquetas div que se utilizarán para el estilo. Para Estilos hemos usado propiedades básicas de CSS.
Nota: puede crear otro archivo CSS para estilos o puede usar el mismo archivo HTML para usar el mismo archivo HTML y escribir propiedades CSS debajo de la etiqueta de estilo .
CSS
.background {
background-color: green;
height: 150px;
padding: 10px;
}
.card {
margin-right: auto;
margin-left: auto;
width: 250px;
box-shadow: 0 15px 25px rgba(129, 124, 124, 0.2);
height: 300px;
border-radius: 5px;
backdrop-filter: blur(14px);
background-color: rgba(255, 255, 255, 0.2);
padding: 10px;
text-align: center;
}
.card img {
height: 60%;
}
En el código mencionado anteriormente, en la clase de tarjeta, hemos agregado la propiedad de filtro de fondo para desenfocar, que será responsable del efecto de desenfoque. La propiedad de filtro de fondo de CSS se utiliza para aplicar efectos al área detrás de un elemento.
Nota: Para una mejor comprensión de la propiedad del filtro de fondo, haga clic en el enlace mencionado.
Código completo:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Blur Card</title>
<style>
.background {
background-color: green;
height: 150px;
padding: 10px;
}
.card {
margin-right: auto;
margin-left: auto;
width: 250px;
box-shadow: 0 15px 25px rgba(129, 124, 124, 0.2);
height: 300px;
border-radius: 5px;
backdrop-filter: blur(14px);
background-color: rgba(255, 255, 255, 0.2);
padding: 10px;
text-align: center;
}
.card img {
height: 60%;
}
</style>
</head>
<body>
<div class="background">
<div class="card">
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
alt="image" />
<h1>GeeksforGeeks</h1>
<h3>Happy Coding</h3>
</div>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por anuragsingh1022 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA