NeumorphismUI es una interfaz de usuario suave moderna que se utiliza para diseñar elementos web, marcos y pantallas, y también es una tendencia de diseño relativamente nueva que alcanzó una gran popularidad en estos días. Su estética está marcada por una interfaz de usuario mínima y de aspecto real que es una especie de re-avance de la antigua tendencia de diseño SkeuomorphismUI.
Código HTML:
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="index.css"> </head> <body> <div class="container"> <div class="anime"></div> </div> </body> </html>
index.css: El siguiente es el código para el archivo «index.css» que se utiliza en el código HTML anterior.
<style>
.container {
background: #f2f2f2;
box-sizing: border-box;
display: grid;
place-items: center;
width: 100vw;
height: 100vh;
}
.anime {
border-radius: 999px;
width: 50px;
height: 50px;
background: #f2f2f2;
box-shadow: 0 0 0 #ddd,
0 0 0 #fff,
10px 10px 10px #ddd inset,
-10px -10px 10px #fff inset;
/* Adding Animations */
animation: gfg 5s cubic-bezier(0.16,
1, 0.3, 1) 1s infinite alternate;
}
@keyframes gfg {
0% {
width: 60px;
height: 60px;
background: #f2f2f2;
box-shadow: 0 0 0 #ddd,
0 0 0 #fff,
10px 10px 10px #ddd inset,
-10px -10px 10px #fff inset;
}
25% {
width: 60px;
height: 60px;
background: #fcfcfc;
box-shadow: 10px 10px 10px #ddd,
10px 10px 10px #fff,
0 0 0 #cccccc inset,
0 0 0 #fff inset;
}
50% {
width: 60px;
height: 160px;
background: #fcfcfc;
box-shadow: 10px 10px 10px #ddd,
10px 10px 10px #fff,
0 0 0 #ddd inset,
0 0 0 #fff inset;
}
100% {
width: 556px;
height: 77px;
/* background: #fefefe; */
background: url(
https://media.geeksforgeeks.org/wp-content/cdn-uploads/20200817185016/gfg_complete_logo_2x-min.png);
box-shadow: 40px 40px 40px #ddd,
0 0 0 #fff,
0 0 0 #ddd inset,
2px 2px 2px #fff inset;
}
}
</style>
Producción:
Navegadores compatibles:
- Google Chrome
- Borde
- Mozilla Firefox
- Ópera
- Safari