La tecnología de Frosted Glass expandida de los juegos a la web

Frosted Glass de los juegos a la web

• Introducción

  • Mientras trabajaba como desarrollador de UI en Forza Horizon 3 y Forza Motorsport 7, experimentó hermosos elementos de diseño acrílico esmerilado.
  • Quiso implementar un efecto similar usando HTML, y en esta página comparte ese intento.

• El papel de backdrop-filter

  • La clave del efecto de vidrio esmerilado es desenfocar el fondo usando blur gaussiano.
  • En CSS, se puede aplicar blur gaussiano usando backdrop-filter y la función blur.
  • Internet Explorer no es compatible con esta función.

• Agregar profundidad

  • Creó un vidrio básico con backdrop-filter: blur(10px), pero para lograr un efecto con más profundidad añadió profundidad en los bordes usando box-shadow: inset.

• Sombras reales

  • Para eliminar la sensación de que un objeto 3D está atrapado en un espacio 2D, añadió un box-shadow oscuro para hacer que el vidrio pareciera físicamente elevado sobre el fondo.

• Interacción con la luz

  • Para mejorar la interacción entre el vidrio y la luz, introdujo una dispersión subsuperficial simple.
  • Usó box-shadow: inset para simular el efecto de que la luz se difumina ligeramente en los bordes del vidrio.

• Luz más interesante

  • Para resaltar las propiedades reflectantes del vidrio, usó rayos de luz como imagen de fondo.
  • Usó ::before para aplicar la imagen de fondo al elemento de vidrio.

• Luz dinámica

  • Implementó un efecto de reflejo dinámico en todas las plataformas usando CSS y JavaScript.
  • Usó JavaScript para ajustar dinámicamente background-position y simular el efecto de background-attachment: fixed.

• Cierre

  • Para completar el efecto de vidrio, añadió esquinas redondeadas, color y texto.
  • Usó border-radius para redondear las esquinas, y overflow: hidden para evitar que los elementos hijos sobresalgan de la superficie del vidrio.

• Conclusión

  • Gracias por acompañar el proceso de creación del efecto de vidrio esmerilado.
  • Para ver una forma de copiar rápidamente todos los recursos y el código, consulta la sección "Final Recipe Lookahead" al inicio del documento.

[GN⁺]

Comentarios de Hacker News

• Un usuario menciona que le gusta la estética, pero siente que es un desperdicio que el cliente calcule repetidamente filtros de desenfoque costosos, y que la tendencia general del desarrollo web parece imponer demasiada carga

  • Aunque está optimizado con GPU, cree que en la práctica no habrá una gran diferencia

• Otro usuario explica que extrajo la textura de "rayos de luz" de Windows 7 e intentó implementar un efecto similar en Android, aumentando ligeramente la saturación del fondo desenfocado

• Otro usuario comenta que la demo interactiva es excelente, pero que odia el uso de vidrio esmerilado en el diseño de interfaces de usuario, y siente que haberlo añadido a Mac OS fue un retroceso

  • Considera que no es ideal, especialmente cuando el contenido detrás del panel es dinámico o generado por el usuario

• Un usuario explica que en 2008 implementó un efecto similar mediante un experimento con CSS usando una imagen de fondo predesenfocada en posición fija

  • Menciona que esto ofrece mejor rendimiento que un desenfoque gaussiano en tiempo real, pero tiene la desventaja de no permitir imágenes de fondo dinámicas

• Otro usuario opina que hay 10 efectos superpuestos y que, salvo el componente estético más necesario, unos 7 son demasiados

  • Sugiere usar solo color de fondo, desenfoque, sombra de caja o borde

• Un usuario explica que le gusta agregar una textura de ruido para obtener un resultado más áspero

• Otro usuario comenta que el logro técnico es genial, pero que la UX es mala

  • Explica que es más difícil leer o comprender el contenido dentro de paneles semitransparentes porque el contraste con el fondo es bajo e inconsistente

• Un usuario menciona que uno de los demos originales de CSS era para el efecto de vidrio esmerilado, y le parece interesante

• Otro usuario explica que siempre le impresiona ver el lado creativo y poderoso de CSS, pero siente que jamás logrará entender cierto nivel de comprensión de HTML/CSS

• Por último, menciona que el ejemplo interactivo es bueno, pero habría sido mejor si tuviera una comparación o una opción para alternar a una versión anterior

  • Explica que, en la mayoría de los casos, las mejoras de cada iteración eran sutiles, así que no podía notar la diferencia