La technologie du verre dépoli étendue du jeu au web

Du verre dépoli du jeu au web

• Introduction

  • En travaillant comme développeur UI sur Forza Horizon 3 et Forza Motorsport 7, l’auteur a découvert de magnifiques éléments de design en acrylique dépoli.
  • Il a voulu reproduire un effet similaire en HTML et partage ici cette tentative.

• Le rôle de backdrop-filter

  • Le cœur de l’effet de verre dépoli consiste à flouter l’arrière-plan à l’aide d’un flou gaussien.
  • En CSS, on peut appliquer ce flou gaussien avec backdrop-filter et la fonction blur.
  • Internet Explorer ne prend pas en charge cette fonctionnalité.

• Ajouter de la profondeur

  • Un verre de base a été créé avec backdrop-filter: blur(10px), mais pour obtenir un effet plus profond, l’auteur a ajouté de la profondeur sur les bords avec box-shadow: inset.

• Une vraie ombre

  • Pour éviter l’impression d’un objet 3D coincé dans un espace 2D, une ombre portée sombre a été ajoutée avec box-shadow, afin de donner l’impression que le verre se détache physiquement de l’arrière-plan.

• Interaction avec la lumière

  • Pour améliorer l’interaction entre le verre et la lumière, un effet simple de subsurface scattering a été introduit.
  • box-shadow: inset est utilisé pour simuler une légère diffusion de la lumière sur les bords du verre.

• Une lumière plus intéressante

  • Pour accentuer les propriétés réfléchissantes du verre, des rayons lumineux sont utilisés comme image de fond.
  • ::before sert à appliquer cette image d’arrière-plan à l’élément en verre.

• Lumière dynamique

  • Un effet de réflexion dynamique est implémenté avec CSS et JavaScript sur toutes les plateformes.
  • JavaScript ajuste dynamiquement background-position pour simuler l’effet de background-attachment: fixed.

• Finitions

  • Pour finaliser l’effet de verre, des coins arrondis, de la couleur et du texte ont été ajoutés.
  • border-radius est utilisé pour arrondir les coins, et overflow: hidden empêche les éléments enfants de dépasser de la surface du verre.

• Conclusion

  • Merci d’avoir suivi ce processus de création d’un effet de verre dépoli.
  • Pour copier rapidement tous les assets et le code, consultez la section "Final Recipe Lookahead" au début du document.

[GN⁺]

Commentaires sur Hacker News

• Un utilisateur indique qu’il apprécie l’aspect esthétique, mais trouve que le fait que le client recalcule sans cesse des filtres de flou coûteux est du gaspillage, et que la tendance générale du développement web semble imposer une charge excessive

  • Il pense que, même si c’est optimisé via le GPU, la différence réelle ne sera pas si grande

• Un autre utilisateur explique avoir extrait la texture des « rayons de lumière » de Windows 7 pour tenter de reproduire un effet similaire sur Android, en augmentant légèrement la saturation de l’arrière-plan flouté

• Un autre utilisateur trouve la démo interactive excellente, mais dit détester l’usage du verre dépoli dans le design d’interface utilisateur, estimant que son ajout à Mac OS a été une régression

  • Il considère que ce n’est pas idéal, en particulier lorsque le contenu derrière les panneaux est dynamique ou généré par les utilisateurs

• Un utilisateur explique avoir obtenu un effet similaire en 2008 via une expérimentation CSS utilisant une image d’arrière-plan préfloutée et en position fixe

  • Il précise que c’est plus performant qu’un flou gaussien en temps réel, mais que cela a l’inconvénient de ne pas permettre des images d’arrière-plan dynamiques

• Un autre utilisateur estime que 10 effets superposés, c’est excessif, et qu’en dehors de l’élément esthétique le plus recherché, environ 7 sont de trop

  • Il suggère de se limiter à une couleur de fond, un flou, une ombre portée ou une bordure

• Un utilisateur explique qu’il aime ajouter une texture de bruit pour obtenir un rendu plus rugueux

• Un autre utilisateur note que la prouesse technique est impressionnante, mais que l’UX est mauvaise

  • Il explique que le contenu à l’intérieur des panneaux semi-transparents est plus difficile à lire ou à comprendre, car le contraste avec l’arrière-plan est faible et incohérent

• Un utilisateur mentionne que l’une des démos CSS originales était justement consacrée à l’effet verre dépoli, ce qu’il trouve intéressant

• Un autre utilisateur dit qu’il est toujours impressionné par le côté créatif et puissant du CSS, mais qu’il a l’impression de ne jamais pouvoir comprendre certains niveaux de maîtrise en HTML/CSS

• Enfin, un utilisateur indique que l’exemple interactif est bon, mais qu’il aurait été encore meilleur avec une comparaison ou un bouton pour revenir à la version précédente

  • Il explique que, dans la plupart des cas, les améliorations à chaque itération étaient trop subtiles pour qu’il puisse voir la différence