Marketing

8 ejemplos impresionantes de efectos CSS Glassmorphism

Los efectos del morfismo del vidrio se han convertido en un elemento básico en el diseño web moderno. Ofrecen una estética elegante y encajan perfectamente con casi cualquier color de fondo.

La definición exacta de morfismo de vidrio puede variar ligeramente. Sin embargo, es esencialmente un elemento «mate» o semitransparente que imita la apariencia del vidrio y parece colgar sobre el resto de la página. Por lo tanto, el fondo del recipiente puede brillar. Incluso puede ver algo de refracción en interpretaciones más realistas.

¿Quieres ver de qué se trata todo este alboroto? Hemos reunido una colección de efectos de transformación de vidrio desarrollados con CSS y otras tecnologías web. Van desde elementos comunes de la interfaz de usuario, como botones, hasta creaciones más abstractas. ¡Agradecer!

Caja de herramientas del diseñador web

Descargas ilimitadas: más de 1.000.000 de plantillas web, temas, complementos, recursos de diseño y más.

La zapatilla de cristal se libera

La interfaz de usuario de esta tarjeta de producto proporciona una prueba de que la belleza del morfismo del vidrio reside en su simplicidad. Toma un hermoso fondo degradado y agrega dimensión. Pase el cursor sobre el zapato y saldrá del contenedor y prácticamente rebotará en la página.

Ver la pluma
[WIP] Producto Glassmorph de Alex

Forma esmerilada

El efecto de vidrio esmerilado se usa bien aquí, ya que permite que este formulario de inicio de sesión se destaque de la parte inferior de la foto en la página. Este es uno de los principales beneficios de utilizar esta técnica de diseño. Puede utilizar un fondo complejo manteniendo el texto legible. Y no interrumpe el flujo como lo haría un recipiente de color sólido.

Ver la pluma
Efecto de vidrio esmerilado – Forma Usama Tahir

Portarretratos

Este marco de fotos interactivo presenta una apariencia de vidrio coloreado en capas. Las formas multicolores dentro del marco utilizan varios modos de fusión, creando un efecto 3D. Pasar el mouse o tocar el marco le permite rotar el objeto, momento en el que entra en juego un reflejo sutil.

Ver la pluma
Efecto de reflexión de vidrio CSS de Dovydas

Es una copa de verdad

Nunca podremos encontrar un uso más natural del morfismo del vidrio. Esta cerveza CSS comienza como una taza vacía. Haz clic y mantén presionado el vaso para ver cómo se llena con algo espumoso y burbujeante. El color translúcido y la refracción lo hacen aún más realista. ¡Salud!

LEER  Tascam DR-60D Audio Recorder Review

Ver la pluma
¡CERVEZA CSS! por Mike Golus

Superposición de texto

Esta es una buena forma de agregar efectos de vidrio en la parte superior del texto. Usando elementos absolutamente posicionados, estas formas redondeadas aportan un toque único a un encabezado HTML normal. Esto se puede implementar en títulos de páginas o incluso logotipos basados ​​en texto.

Ver la pluma
Glassmorfismo de Albert

Mantenga mis botones

Nominalmente, este fragmento genera patrones de onda de macOS. Pero también hace un buen uso del morfismo del vidrio. El pequeño contenedor que se utiliza para albergar un conjunto de botones es muy eficaz para convertirlos en el punto focal de la página.

Ver la pluma
Ondas generativas de macOS Big Sur 🌊 [SVG] por George Francis

Títulos de vidrio grueso

El uso de imágenes grandes que aparecen en los títulos de las páginas es una técnica de diseño popular. El problema es que puede resultar difícil mantener el texto legible sin arruinar toda la estética. Este extracto nos muestra que un efecto de vidrio esmerilado puede funcionar muy bien. Incluso con el fondo en movimiento de la foto, el texto incluido es fácil de encontrar y leer.

Ver la pluma
CSS – Vidrio esmerilado de Kyle Wetton

Matemáticas de vidrio

Las calculadoras a menudo se describen como utilitarias y sin un diseño atractivo. Este no tiene por qué ser el caso. Eche un vistazo a esta hermosa trituradora numérica mejorada con morfismo de vidrio. Aunque los efectos fluctuantes de cambiar la perspectiva pueden ser un poco exagerados en términos de usabilidad, la apariencia de la calculadora en sí es perfecta.

Ver la pluma
Calculadora Jack Ellis Glassmorph JS

Agregue un toque de morfismo de vidrio a sus proyectos

Es fácil ver por qué los diseñadores web continúan adoptando el morfismo del vidrio. El efecto es relativamente simple. Sin embargo, agrega elementos de belleza y utilidad.

Como vimos anteriormente, incluso algo tan simple como un pequeño recipiente que contenga botones puede causar un impacto. No tiene que exagerar los efectos especiales para crear una apariencia limpia y efectiva. Se trata más de trabajar y mejorar las imágenes que tiene, en lugar de inventar algo nuevo.

Esperamos que haya disfrutado de esta mirada al morfismo del vidrio. Si desea ver más ejemplos excelentes, visite nuestra colección CodePen.

Author

Moisés Cabrera

Encantado de emprender, el Internet es como pez en el rio para mi y quiero aportar valor a este mundo digital. Si crees que es de interés estos artículos no dudes en comentar.

¿Te gusta nuestro contenido?Recibe noticias y estrategias digitales a tu correo.

No pierda la oportunidad de recibir también descuentos de nuestros servicios.