En este artículo, implementaremos un efecto de vidrio esmerilado utilizando la clase de tarjeta bootstrap 4. La siguiente imagen es el resultado final que obtendrá como resultado final de este artículo.
Acercarse:
1. Diseñar el cuerpo: primero configuremos el fondo de su página web. Escriba el siguiente código debajo de su etiqueta principal dentro de su etiqueta <style>. Si ya configuró su propiedad de fondo (que tendría), pase a la siguiente sección. Si no, aquí tienes.
CSS
body {
background-image: url('background.jpg');
background-repeat: no-repeat;
background-size: 100%;
background-attachment: fixed;
}
Puede leer sobre las propiedades anteriores aquí
2. Tarjeta de vidrio escarchado: debajo de la etiqueta de estilo, use el siguiente código,
CSS
.card {
box-shadow: 0 0 5px 0 ;
background: inherit;
backdrop-filter: blur(10px);
<!--margin: 100px; according to your need-->
}
Entonces que tenemos aqui,
- box-shadow : esta propiedad se usa para dar un efecto de sombra a los marcos de un elemento.
- background : use esto para hacer que el elemento sea transparente y tenga el mismo fondo que su página web (en la clase de cuerpo es necesario tener «archivo adjunto de fondo: fijo»)
- filtro de fondo : Úselo para aplicar efectos al área detrás de un elemento. ( Lea esto también ) Básicamente, esta es la propiedad que está reduciendo mucho el estilo CSS aquí.
- margen : el margen y el relleno se ajustan a sus necesidades.
Nota: Ha habido problemas con el navegador Firefox de Mozilla y, en algunos casos, el filtro de fondo no funciona correctamente, Chrome y Edge funcionan bien.
3. <div> en el cuerpo:
HTML
<body> <div class="container"> <div class="card card-body" style="justify-content: center;"> <!--Contents <h1 >_______</h1> --> </div> </div> </body>
Código definitivo:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<style>
body {
background-image: url(
"https://media.geeksforgeeks.org/wp-content/uploads/20200318142240/Bootstrap5.png");
background-repeat: no-repeat;
background-size: 100%;
background-attachment: fixed;
}
h1 {
color: white;
height: 250px;
display: flex;
justify-content: center;
align-items: center;
}
.card {
top: 50%;
box-shadow: 0 0 5px 0;
background: inherit;
backdrop-filter: blur(10px);
margin: 100px;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="card card-body"
style="justify-content: center;">
<h1>GeeksforGeeks</h1>
</div>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por kumar0rishav y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA