El efecto de caja flotante es un ejemplo clásico de una técnica de sombra de caja personalizada. En esta técnica, creamos sombras que parecen realistas sin utilizar la propiedad box-shadow que proporciona el CSS.
Enfoque: el enfoque es usar después del selector para usar crear sombra usando la función de desenfoque .
Código HTML: En esta sección, hemos creado la estructura básica del cuerpo. Aquí, hemos usado una etiqueta <div> que contiene un atributo de clase para representar el cuadro flotante en la pantalla.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Floating Box</title> </head> <body> <h1>GeeksForGeeks</h1> <div class="geeks"></div> </body> </html>
Código CSS: en esta sección, hemos utilizado algunas propiedades CSS para diseñar cuadros flotantes y asignarles algunos estilos. Los siguientes pasos describen las propiedades de CSS:
- Paso 1: Primero, hemos realizado algunos estilos básicos, como proporcionar un fondo, crear un cuadro y alinear todo en el centro de la página.
- Paso 2: ahora, use el selector posterior para crear una línea delgada debajo del cuadro que hemos creado y luego use la función de desenfoque para darle el efecto de sombra.
Sugerencia: intente usar un color más oscuro y un valor bajo para la función de desenfoque de la sombra. Si no, podrías terminar haciendo que tu sombra sea transparente.
CSS
<style>
body {
background: green;
}
h1 {
display: flex;
justify-content: center;
color: white;
font-size: 40px;
}
.geeks {
width: 400px;
height: 250px;
background: white;
position: absolute;
top: 16%;
left: 35%;
border-radius: 20px;
}
.geeks::after {
content: "";
position: absolute;
bottom: -30px;
background: rgb(43, 42, 42);
width: 90%;
height: 4px;
left: 3%;
border-radius: 50%;
filter: blur(3px);
}
</style>
Código Completo: Es la combinación de los dos códigos anteriores.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width,initial-scale=1.0">
<title>Floating Box</title>
<style>
body {
background: green;
}
h1 {
display:flex;
justify-content: center;
color: white;
font-size: 40px;
}
.geeks {
width:400px;
height:250px;
background: white;
position: absolute;
top:16%;
left:35%;
border-radius: 20px;
}
.geeks::after {
content: "";
position: absolute;
bottom: -30px;
background: rgb(43, 42, 42);
width: 90%;
height:4px;
left:3%;
border-radius:50%;
filter: blur(3px);
}
</style>
</head>
<body>
<h1>GeeksForGeeks</h1>
<div class="geeks"></div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por sirohimukul1999 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA