El neumorfismo (neomorfismo) es una forma moderna de diseñar elementos web de cualquier página web y proporcionar un efecto 3D. Este efecto de animación se puede generar fácilmente usando HTML y CSS. La propiedad Box-shadow de CSS se puede utilizar para implementar Neumorfismo. Se utiliza para agregar una sombra oscura a un lado y una sombra clara al otro lado del elemento dado.
Código HTML: En este apartado realizaremos la maquetación de la caja.
- índice.html:
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> </head> <body> <div class="container"> <div class="neu-1"> GeeksForGeeks</div> <div class="neu-2">GeeksForGeeks</div> </div> </body> </html>
Código CSS: En esta sección, usaremos algunas propiedades CSS para diseñar la caja.
- índice.css:
HTML
<style>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.container {
height: 100vh;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 30px;
background: #dde1e7;
}
.neu-1 {
height: 300px;
width: 300px;
background: #dde1e7;
border-radius: 6px;
box-shadow: -3px -3px 7px #ffffffb2,
3px 3px 5px rgba(94, 104, 121, 0.945);
}
.neu-2 {
margin: 50px;
height: 300px;
width: 300px;
background: #dde1e7;
border-radius: 6px;
box-shadow: inset -3px -3px 7px #ffffffb0,
inset 3px 3px 5px rgba(94, 104, 121, 0.692);
}
</style>
Código completo: en esta sección, combinaremos las dos secciones anteriores para crear un neumorfismo usando HTML y CSS.
HTML
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<style>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.container {
height: 100vh;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 30px;
background: #dde1e7;
}
.neu-1 {
height: 300px;
width: 300px;
background: #dde1e7;
border-radius: 6px;
box-shadow: -3px -3px 7px #ffffffb2,
3px 3px 5px rgba(94, 104, 121, 0.945);
}
.neu-2 {
margin: 50px;
height: 300px;
width: 300px;
background: #dde1e7;
border-radius: 6px;
box-shadow: inset -3px -3px 7px #ffffffb0,
inset 3px 3px 5px rgba(94, 104, 121, 0.692);
}
</style>
</head>
<body>
<div class="container">
<div class="neu-1"> GeeksForGeeks</div>
<div class="neu-2">GeeksForGeeks</div>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por ritikumariupadhyay24 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA