¿Qué es el Glassmorphism o Vidriomorfismo en español?

Las tendencias y estilos evolucionan constantemente, buscando formas innovadoras de mejorar la experiencia del usuario. Una de estas tendencias que ha ganado popularidad en los últimos años es el Glassmorphism o Vidriomorfismo en español. Este término, acuñado por Michal Malewicz de Hype4.Academy, hace referencia a un estilo visual que emula el aspecto de un vidrio esmerilado, creando una combinación única de transparencia, difuminado y superposiciones que da la sensación de estar observando a través de un cristal.

El origen y la popularidad del Glassmorphism

El concepto de Glassmorphism se introdujo formalmente en noviembre de 2020, cuando Malewicz publicó un artículo que categorizaba y nombraba esta tendencia emergente. La idea detrás de darle un nombre específico fue facilitar su identificación, estudio y aplicación en proyectos de diseño de interfaces. Una vez que el término comenzó a circular en línea, la tendencia despegó rápidamente, acompañada por el hashtag #glassmorphism. Desde entonces, miles de diseñadores han adoptado este estilo, creando ejercicios de UI (interfaz de usuario) que muestran las diversas posibilidades que ofrece el Vidriomorfismo.

Características principales del Glassmorphism

El Vidriomorfismo se caracteriza por varios elementos clave que lo distinguen de otras tendencias de diseño:

1. Transparencia y Difuminado: Uno de los aspectos más distintivos del Glassmorphism es el uso de capas semitransparentes que permiten ver lo que hay detrás de ellas, combinadas con un efecto de difuminado que simula el vidrio esmerilado. Esto crea una sensación de profundidad y realismo en la interfaz.
2. Superposiciones y Sombras: Los elementos diseñados en este estilo suelen superponerse, creando un efecto de capas que mejora la percepción de tridimensionalidad. Además, las sombras suaves y los bordes redondeados ayudan a acentuar el efecto de vidrio.
3. Colores Desaturados: A menudo, los elementos en Glassmorphism utilizan colores desaturados o tonos pastel, lo que contribuye a una apariencia más suave y elegante. Los colores vibrantes se reservan para acentos o elementos interactivos, como botones.
4. Bordes Definidos: Para mejorar la percepción de las capas y el efecto de transparencia, los elementos suelen estar delineados con bordes finos y definidos, generalmente en colores claros como blanco o gris claro.

Aplicaciones del Glassmorphism en el diseño moderno

El Vidriomorfismo ha encontrado su lugar en diversos ámbitos del diseño de interfaces, desde aplicaciones móviles hasta sitios web y sistemas operativos. Uno de los ejemplos más conocidos de su aplicación es el sistema operativo macOS Big Sur de Apple, que incorpora elementos de Glassmorphism en su interfaz, especialmente en las ventanas y menús.

Este estilo es ideal para diseños que buscan un balance entre modernidad y elegancia, proporcionando una experiencia de usuario visualmente atractiva sin sacrificar la funcionalidad. Su capacidad para crear una jerarquía visual clara, donde los elementos importantes destacan mientras otros se mantienen sutilmente en el fondo, lo hace particularmente útil en diseños minimalistas.

¿Por qué utilizar Glassmorphism?

El Vidriomorfismo no solo es una tendencia atractiva desde el punto de vista estético, sino que también ofrece ventajas prácticas en el diseño de interfaces:

• Enfoque en la Usabilidad: Al utilizar transparencias y difuminados, el Glassmorphism permite mantener el enfoque en los elementos importantes de la interfaz, sin abrumar al usuario con demasiada información visual.
• Versatilidad: Este estilo puede adaptarse a una amplia gama de aplicaciones, desde interfaces de usuario para dispositivos móviles hasta páginas web, dashboards y más.
• Elegancia Visual: Su capacidad para crear interfaces elegantes y modernas lo hace ideal para marcas y productos que buscan transmitir una imagen de sofisticación y tecnología avanzada.

¿Dónde conseguir generador de efecto para elementor?

Puedes crear el efecto Glassmorphism en una columna o contenedor de elementor añadiendo estilos:

1.- Crea un contenedor de elementor

2.- Añade una columna

3.-  añade contenido a la columna ejemplo una imagen un titulo y un texto y botón.

4.- Añade el estilo CSS en el plugin code snippets 

5.- selecciona la columna y en avanzado/ Clases CSS añade el ID ariapsaglasswhite (sin el punto)

Glassmorphism blanco:

add_action( ‘wp_head’, function () { ?>
<style>
.ariapsaglasswhite {
background: rgba( 255, 255, 255, 0.2 );
box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
backdrop-filter: blur( 10px );
-webkit-backdrop-filter: blur( 10px );
border-radius: 10px;
border: 2px solid rgba( 255, 255, 255, 0.18 );
</style>
<?php } );

Glassmorphism negro:

add_action( ‘wp_head’, function () { ?>
<style>
.ariapsaglassblack {
background: rgba( 0, 0, 0, 0.3 );
box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
backdrop-filter: blur( 10px );
-webkit-backdrop-filter: blur( 10px );
border-radius: 10px;
border: 1px solid rgba( 255, 255, 255, 0.18 );
</style>
<?php } );

A continuación, te explico línea por línea su funcionamiento:

1. add_action( 'wp_head', function () { ?>:
   • Esta línea utiliza la función add_action() de WordPress para engancharse al hook wp_head.
   • El hook wp_head se ejecuta en la sección <head> de cada página, lo que permite inyectar código en esa parte del HTML.
   • Dentro de la función add_action(), se pasa una función anónima (closure) que contendrá el código a ejecutar. En este caso, la función no tiene un nombre específico y simplemente contiene un bloque de código HTML/CSS.
2. <style>:
   • Abre una etiqueta <style>, indicando que el contenido dentro de esta etiqueta es código CSS.
3. .ariapsaglasswhite {:
   • Define una clase CSS llamada .ariapsaglasswhite. Este selector se usará para aplicar estilos a cualquier elemento HTML que tenga asignada esta clase.
4. background: rgba( 255, 255, 255, 0.2 );:
   • Aplica un color de fondo blanco semitransparente al elemento con la clase .ariapsaglasswhite.
   • El valor rgba(255, 255, 255, 0.2) significa que el color de fondo es blanco (rgb(255, 255, 255)) con una opacidad del 20% (indicado por 0.2).
5. box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );:
   • Aplica una sombra a la caja del elemento.
   • La sombra tiene un desplazamiento en el eje Y de 8px, un desenfoque de 32px y sin desplazamiento en el eje X o extensión (0).
   • La sombra es de color azul oscuro (rgba(31, 38, 135, 0.37)) con una opacidad del 37%.
6. backdrop-filter: blur( 10px );:
   • Aplica un efecto de desenfoque (blur) de 10px a cualquier contenido que esté detrás del elemento. Este efecto es parte del estilo de Glassmorphism, que da la sensación de estar viendo a través de un vidrio esmerilado.
7. -webkit-backdrop-filter: blur( 10px );:
   • Es la misma propiedad backdrop-filter, pero prefijada con -webkit- para garantizar compatibilidad en navegadores basados en WebKit, como Safari.
8. border-radius: 10px;:
   • Redondea las esquinas del elemento con la clase .ariapsaglasswhite a 10px.
9. border: 2px solid rgba( 255, 255, 255, 0.18 );:
   • Añade un borde de 2px de grosor, sólido, y de color blanco semitransparente (18% de opacidad) alrededor del elemento.
10. </style>:
    • Cierra la etiqueta <style>, indicando el final del bloque de código CSS.
11. <?php } );:
    • Cierra la función anónima y finaliza la llamada a add_action().

Genera otros colores en: https://hype4.academy/tools/glassmorphism-generator