Efecto Glassmorphism con CSS o efecto cristal
En este capítulo del cómo se hace te enseño como crear el efecto glassmorphing o glassmorphism con CSS un efecto que consiste en mostrar un contenido como si se estuviera mirando a través de un cristal
Es un efecto que empezó a usarse en 2020. La idea es mostrar capas apiladas que simulan ser un vidrio virtual, algo que además da cierto aspecto de tridimensionalidad. Es como si miraras a través de un vidrio.
Además parece que es una de las tendencias que nos viene para 2024, junto a otras como fondos oscuros, tipos vintage, dibujos de apariencia manual o animaciones de texto.
Las características de este diseño se pueden resumir en estos principios
- Fondos semitransparentes para crear sensación de profundidad.
- Bordes borrosos y otras características que los hagan parecer como si estuvieran hechos de vidrio.
- Efectos de sombra para que los elementos de la interfaz de usuario parezcan flotar en el espacio
Ejemplo de uso, el código HTML
Esta es una posible aplicación del efecto glassmorphism aplicado a toda la página, muy útil para el area hero de una pagina web.
He usado el body como contenedor con una imagen de fondo. Dentro de body se coloca un bloque tipo card con información que queremos mostrar. Este efecto será nuestro vidrio, donde veremos el efecto glassmorphism
La estructura card es habitual en el diseño web (puedes ver como crear una card aquí mismo). Se compone de dos bloques en horizontal. El izquierdo contiene una imagen y el derecho es el otro bloque flex para insertar unas lineas con los datos a mostrar.
La disposición tipo flex facilita mucho la colocación de los elementos.
El elmento html body es un flex horizontal (row), mientras que la mitad con los datos es un flex en columna (column)
Iigualmente se podría haber usado una sectionm div, article o cualquiere bloque conteniendo bloques hijos. Las posicones se pueden conseguir con flx, grid o incluso con poscionamientos absolutos. Experimenta.
<section class="card">
<div class="img">
<img src="/como_se_hace/imgs/glass-img.jpg" alt="room">
</div>
<div>
<header class="title">Bienvenidos al hotel<br>
HighGreen
</header>
<div class="line"><b>Juan Pérez Wiskat</b></div>
<div class="line"><b>Angela Restin Rute</b></div>
<div class="subtitle">Su reserva está confirmada</div>
<div class="line"><b>Día de entrada: 12 de Febrero de 2030</b></div>
<div class="line"><b>Día de salida: 20 de Febrero de 2030</b></div>
</div>
</section>
Estilos CSS para el efecto glassmorphism.
La clave para lograr este efecto vidrio es el uso de elementos apilados. Tendremos un contenedor que será nuestro fondo (podría ser otro bloque), y dentro un elemento hijo que hará las veces del vidrio a través del cual vemos el elemento de detrás.
La forma más simple es usar el elemento body con una imagen de fondo. Sería el contenedor.
El elemento hijo puede ser una ventana o bloque div con aspecto translucido que dejará ver el fondo pero d emanera nítida, sino como a través del vidrio (en este caso la card).
/*Esta regla (.card) es la clave para lograr el efecto*/
.card {
backdrop-filter: blur(2.4px) saturate(148%);
-webkit-backdrop-filter: blur(2.4px) saturate(148%);
background-color: rgba(255, 255, 255, 0.41);
border-radius: 12px;
border: 1px solid rgba(209, 213, 219, 0.3);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
display:flex;
width: 70%;
}
.card .body{
display: flex;
flex-direction: column;
padding: 4px 4px 4px 12px;
justify-content: space-around;
}
.card .title{
font-size: 1.8rem;
color: black;
text-align: center;
padding-bottom: 10px
}
.card .subtitle{
font-size: 1.2rem;
color: #ffffff;
text-shadow: 1px 2px 7px black;
padding: 10px 0;
}
.card .line{
padding-left: 10px;
}
.card .img{
display:flex;
overflow:clip;
max-width:50%;
}
.card .img img{
border-radius: 12px;
}
html{
font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
font-size: 18px;
}
body{
background-image: url("/como_se_hace/imgs/glasmorfism-bck.jpg");
background-size: cover;
min-width: 100vw;
min-height: 100vh;
display:flex;
justify-content: center;
align-items: center;
}