Hero

Hero verre liquide

Fond noir, colonne éditoriale à gauche, grille d'icônes à droite, et une dizaine de panneaux de verre posés dessus. Le verre n'est pas un backdrop-blur : chaque panneau enchaîne deux filtres SVG dans son backdrop-filter, un feDisplacementMap qui déforme ce qui passe derrière en se servant d'une petite texture PNG comme carte de déplacement, puis un feBlend overlay qui rejoue la même texture en grain. La réfraction est donc calculée à partir du contenu réel de la page et bouge avec lui, au lieu d'être un dégradé peint à la main. Les identifiants de filtres sortent de useId, sinon deux panneaux partageraient la même définition et le second effacerait le premier. Le backdrop-filter avec url(#filtre) reste une affaire de moteurs Chromium : ailleurs le panneau retombe sur son fond blanc à 5%, lisible, simplement sans réfraction.

AMOUSSOU Siméon Céphas· 6 vues1