A tecnologia Frosted Glass expandida dos jogos para a web

Frosted Glass dos jogos para a web

• Introdução

  • Trabalhando como desenvolvedor de UI de Forza Horizon 3 e Forza Motorsport 7, ele teve contato com belos elementos de design em acrílico fosco.
  • Quis reproduzir um efeito semelhante usando HTML e compartilha nesta página essa tentativa.

• O papel de backdrop-filter

  • O núcleo do efeito de vidro fosco é desfocar o fundo usando blur gaussiano.
  • No CSS, é possível aplicar blur gaussiano com backdrop-filter e a função blur.
  • O Internet Explorer não oferece suporte a esse recurso.

• Adicionando profundidade

  • Ele criou um vidro básico com backdrop-filter: blur(10px), mas, para um efeito com mais profundidade, adicionou profundidade às bordas com box-shadow: inset.

• Sombra real

  • Para eliminar a sensação de que um objeto 3D está preso em um espaço 2D, adicionou uma box-shadow escura para fazer o vidro parecer fisicamente elevado em relação ao fundo.

• Interação com a luz

  • Para melhorar a interação entre o vidro e a luz, introduziu um subsurface scattering simples.
  • Usou box-shadow: inset para simular o efeito de a luz se espalhar levemente nas bordas do vidro.

• Uma luz mais interessante

  • Para destacar as propriedades reflexivas do vidro, usou raios de luz como imagem de fundo.
  • Aplicou a imagem de fundo ao elemento de vidro com ::before.

• Luz dinâmica

  • Implementou um efeito de reflexão dinâmica em todas as plataformas usando CSS e JavaScript.
  • Com JavaScript, ajustou dinamicamente background-position para simular o efeito de background-attachment: fixed.

• Finalização

  • Para completar o efeito de vidro, adicionou cantos arredondados, cores e texto.
  • Usou border-radius para arredondar os cantos e overflow: hidden para impedir que elementos filhos ultrapassem a superfície do vidro.

• Conclusão

  • Agradece por acompanharem o processo de criação do efeito de vidro fosco.
  • Para uma forma rápida de copiar todos os recursos e o código, consulte a seção "Final Recipe Lookahead" no início do documento.

[GN⁺]

Comentários do Hacker News

• Um usuário mencionou que gosta do aspecto estético, mas considera desperdício o cliente recalcular repetidamente filtros de desfoque caros, e acha que a tendência geral do desenvolvimento web é impor carga demais

  • Embora tenha sido otimizado com GPU, ele acha que, na prática, isso não fará muita diferença

• Outro usuário explicou que tentou extrair a textura de "raios de luz" do Windows 7 para implementar um efeito semelhante no Android, e aumentou ligeiramente a saturação do fundo desfocado

• Outro usuário comentou que a demo interativa é excelente, mas odeia o uso de vidro fosco no design de interface do usuário, e sente que sua adição ao Mac OS foi um retrocesso

  • Ele acha que isso é especialmente inadequado quando o conteúdo atrás do painel é dinâmico ou gerado pelo usuário

• Um usuário explicou que, em 2008, implementou um efeito semelhante por meio de um experimento em CSS usando uma imagem de fundo pré-desfocada com posição fixa

  • Mencionou que isso tem desempenho melhor do que um desfoque gaussiano em tempo real, mas tem a desvantagem de não permitir imagens de fundo dinâmicas

• Outro usuário disse que há 10 efeitos sobrepostos e que, exceto pelo elemento estético mais necessário, uns 7 deles são exagerados

  • Sugeriu usar apenas cor de fundo, desfoque, sombra de caixa ou borda

• Um usuário explicou que gosta de adicionar uma textura de ruído para obter um resultado mais áspero

• Outro usuário mencionou que a conquista técnica é legal, mas a UX é ruim

  • Explicou que é mais difícil ler ou compreender o conteúdo dentro de painéis semitransparentes, porque o contraste com o fundo é baixo e inconsistente

• Um usuário comentou que uma das demos originais de CSS era justamente para o efeito de vidro fosco, e achou isso interessante

• Outro usuário explicou que sempre fica impressionado ao ver o lado criativo e poderoso do CSS, mas sente que provavelmente nunca entenderá certos níveis de compreensão de HTML/CSS

• Por fim, outro usuário comentou que o exemplo interativo é bom, mas teria sido melhor se houvesse uma função de comparação ou alternância para voltar à versão anterior

  • Explicou que, na maioria dos casos, as melhorias de cada iteração eram sutis demais para perceber a diferença