En este momento estás viendo ▷ Glassmorphism UI: la nueva tendencia de diseño utilizada por Apple y Microsoft

▷ Glassmorphism UI: la nueva tendencia de diseño utilizada por Apple y Microsoft

  • Categoría de la entrada:➤ Web
  • Comentarios de la entrada:Sin comentarios

Glassmorphism UI: la nueva tendencia de diseño utilizada por Apple y Microsoft

Si está siguiendo sitios web relacionados con el diseño, como Dribbble, es posible que haya notado que está surgiendo una nueva tendencia de diseño basada en fondos transparentes y borrosos con imágenes y formas coloridas. Es un estilo que están utilizando grandes marcas, como Apple en su actualización Big Sur MacOS, y Microsoft en su nuevo sistema de diseño Fluent. Se llama: glassmorphism .

Interfaz de usuario de morfismo de vidrio

La imagen de arriba es un ejemplo del efecto utilizado en un sitio web en funcionamiento, llamado ui.glass . Como puede ver, el fondo detrás del código es semitransparente y también se usa un desenfoque. Hay un efecto muy agradable debido a la tarjeta de colores detrás de él, lo que da como resultado el estilo de morfismo de vidrio.

Otro gran ejemplo es un rediseño de la aplicación Facebook Messenger para el sistema operativo Big Sur MacOS, rediseñado por Mikołaj Gałęziowski en Dribbble:

Rediseño de la aplicación Messenger en Glassmorphism

El efecto se utiliza mejor cuando hay formas y fondos simples detrás de los elementos borrosos, como en los dos ejemplos anteriores. La transparencia y el color del fondo del elemento pueden variar, y se puede usar y cambiar fácilmente entre el modo oscuro y el claro, lo que es una clara ventaja en los requisitos de diseño y desarrollo web actuales.

Como mencioné en el título, no solo Apple o Dribbblers usan la nueva tendencia, sino también Microsoft. De hecho, lo han estado usando hace muchos años con el sistema operativo Windows Vista, y también ha sido usado por iOS 7 en algunos casos.

Han pasado muchos años desde entonces, pero Microsoft también lo está usando actualmente en su nuevo Fluent Design System, pero lo llaman Material Acrílico. Aquí hay un ejemplo:

material acrílico

Ahora que te he mostrado un par de ejemplos, ¿cómo se puede implementar esta nueva tendencia de diseño para sitios web? Es bastante fácil y te lo mostraré.

Glassmorphism usando HTML y CSS

Las dos propiedades de estilo CSS más importantes que deben usarse para obtener el efecto de morfismo de vidrio son las propiedades de fondo y filtro de fondo . Por supuesto, también necesitas un elemento para tener un fondo, como una tarjeta. Al mismo tiempo, para ver realmente el efecto, también necesitará un fondo, una forma o una imagen detrás de la tarjeta.

Escribí un fragmento de codepen  que puede consultar para mostrarle una implementación que usa estas propiedades.

Glassmorphism: una próxima biblioteca de interfaz de usuario de CSS

Hay una nueva biblioteca de interfaz de usuario de CSS en la que he estado trabajando con mis colegas de Themesberg y se basa exactamente en esta nueva tendencia de diseño.

Puede ver algunas vistas previas en ui.glass e inscribirse para recibir actualizaciones de progreso y ser uno de los primeros en ser anunciado cuando se lanzará. 

En Estrategia Creativa tenemos toda la información que necesitas sobre el mundo de digital y en especial para tus emprendimiento Si quieres seguir leyendo información útil  ¡echa un vistazo a nuestros artículos!

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)
Etiquetas: , , , , , , , ,

Deja una respuesta