Para dar un efecto de desenfoque de fondo en una superposición, la propiedad backdrop-filter: blur() de CSS se usa con ::before pseudo-element. La propiedad «background -filter: blur() » da el efecto de desenfoque en el cuadro o cualquier elemento donde se desee y «before» se usa para agregar el fondo borroso sin aplicar ningún marcado adicional.
Código HTML: En esta sección, usaremos código HTML para diseñar la estructura básica de la página web.
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> How to make a CSS glass/blur effect work for an overlay? </title> <link rel="stylesheet" href= "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> </head> <body> <section> <div class="layout"> <h1>GeeksforGeeks</h1> <p class="py-2"> It is a computer science portal for geeks. It is a platform where you can learn and practice programming problems. It contains programming content, web technology content, and some other domain content also. </p> <button class="btn btn-danger"> Button </button> </div> </section> </body> </html>
Código CSS: En esta sección, usaremos algunas propiedades CSS para hacer una superposición de efecto de vidrio/desenfoque usando HTML y CSS.
CSS
/* CSS code */
body {
margin: 0;
padding: 0;
}
section {
display: flex;
background: #001923;
justify-content: center;
align-items: center;
width: 100%;
min-height: 100vh;
}
section .layout {
position: relative;
width: 100%;
max-width: 600px;
padding: 50px;
box-shadow: 0 10px 20px rgba(0, 0, 0, .1);
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.25);
border-radius: 10px;
}
section .layout::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
section .layout h1 {
position: relative;
text-align: center;
color: rgb(36, 168, 36);
}
section .layout p {
position: relative;
color: #fff;
}
section .layout button {
position: relative;
}
Código combinado: en esta sección, combinaremos las dos secciones de código anteriores (código HTML y CSS) para crear una superposición de efecto de vidrio/desenfoque.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
How to make a CSS glass/blur
effect work for an overlay?
</title>
<link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<style>
body {
margin: 0;
padding: 0;
}
section {
display: flex;
background: #001923;
justify-content: center;
align-items: center;
width: 100%;
min-height: 100vh;
}
section .layout {
position: relative;
width: 100%;
max-width: 600px;
padding: 50px;
box-shadow: 0 10px 20px rgba(0, 0, 0, .1);
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.25);
border-radius: 10px;
}
section .layout::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
section .layout h1 {
position: relative;
text-align: center;
color: rgb(36, 168, 36);
}
section .layout p {
position: relative;
color: #fff;
}
section .layout button {
position: relative;
}
</style>
</head>
<body>
<section>
<div class="layout">
<h1>GeeksforGeeks</h1>
<p class="py-2">
It is a computer science portal for geeks.
It is a platform where you can learn and
practice programming problems. It contains
programming content, web technology content,
and some other domain content also.
</p>
<button class="btn btn-danger">
Button
</button>
</div>
</section>
</body>
</html>
Producción:
HTML es la base de las páginas web y se utiliza para el desarrollo de páginas web mediante la estructuración de sitios web y aplicaciones web. Puede aprender HTML desde cero siguiendo este tutorial de HTML y ejemplos de HTML .
CSS es la base de las páginas web y se utiliza para el desarrollo de páginas web mediante el diseño de sitios web y aplicaciones web. Puede aprender CSS desde cero siguiendo este tutorial de CSS y ejemplos de CSS .
Publicación traducida automáticamente
Artículo escrito por tushar18bcs1063 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA