GlassmorphismUI, que es una interfaz de usuario suave y 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 y seguramente será la próxima tendencia más importante en los próximos 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 NeomorphismUI.
¿Qué lo hace tan especial?
- El uso de colores saturados para resaltar la transparencia.
- Transparencia (efectos de vidrio esmerilado)
- Un borde sutil y claro en los objetos transparentes.
Código HTML: El siguiente es el código HTML que implementa el Glassmorphism.
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Glassmorphism</title> <link rel="stylesheet" href="index.css"> </head> <body> <div class="rings"> <div class="ring ring1"></div> <div class="ring ring2"></div> </div> <div class="container"> <div class="card"> <div class="logo"> <img src= "https://write.geeksforgeeks.org/static/media/Group%20210.08204759.svg" alt="Visa"> </div> <div class="head">GlassmorphismUI</div> <div class="name">RBBANSAL</div> <div class="back"></div> </div> </div> </body> </html>
index.css: El siguiente código muestra el archivo index.css utilizado en el código HTML anterior.
<style>
body {
/* fallback for old browsers */
background: #0F2027;
/* Chrome 10-25, Safari 5.1-6 */
background: -webkit-linear-gradient(to right,
#2C5364, #203A43, #0F2027);
/* W3C, IE 10+/ Edge, Firefox 16+,
Chrome 26+, Opera 12+, Safari 7+ */
background: linear-gradient(to right,
#2C5364, #203A43, #0F2027);
}
/* For Background circles */
.ring {
position: absolute;
border-radius: 50%;
/* fallback for old browsers */
background: #1f4037;
/* Chrome 10-25, Safari 5.1-6 */
background: -webkit-linear-gradient(
to right, #99f2c8, #366b5c);
/* W3C, IE 10+/ Edge, Firefox 16+,
Chrome 26+, Opera 12+, Safari 7+ */
background: linear-gradient(
to right, #99f2c8, #366b5c);
}
.rings {
position: absolute;
height: 250px;
width: 470px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.ring1 {
height: 180px;
width: 180px;
top: -50px;
left: -60px;
}
.ring2 {
height: 200px;
width: 200px;
bottom: -90px;
right: -90px;
opacity: 0.8;
}
/* For card */
.container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.card {
position: relative;
height: 300px;
width: 450px;
border-radius: 25px;
background: rgba(255, 255, 255, 0.25);
border: 2px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 0 80px rgba(0, 0, 0, 0.2);
overflow: hidden;
}
/* Making all card elements as absolute */
.logo img,
.head,
.name,
.back {
position: absolute;
}
.logo img {
top: 35px;
right: 40px;
width: 80px;
}
.head,
.name {
color: rgba(255, 255, 255, 0.8);
letter-spacing: 2px;
text-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
}
.head {
left: 40px;
bottom: 65px;
font-size: 24px;
}
.name {
font-size: 12px;
left: 40px;
bottom: 35px;
}
/* The two rings on the card background */
.back {
height: 500px;
width: 500px;
border-radius: 50%;
background: transparent;
border: 50px solid rgba(255, 255, 255, 0.1);
bottom: -250px;
right: -250px;
box-sizing: border-box;
}
.back::after {
content: "";
position: absolute;
height: 600px;
width: 600px;
border-radius: 50%;
background: transparent;
border: 30px solid rgba(255, 255, 255, 0.1);
bottom: -80px;
right: -110px;
box-sizing: border-box;
}
</style>
Producción:
Navegadores compatibles:
- Google Chrome
- Borde
- Mozilla Firefox
- Ópera
- Safari