Comment créer un effet de verre dépoli

Les effets de verre dépoli et de translucidité sont devenus très populaires depuis l’essor de l’animation dans le design web. Associés à des animations et à des fonctions de type parallaxe, ces effets ajoutent de la profondeur aux pages, leur conférant une qualité presque 3D. Ci-dessous, nous mettons en avant quelques effets que l’on peut obtenir grâce à une combinaison de couleur, d’opacité et de filtres d’arrière-plan. Nous avons illustré ces effets en superposant des blocs stylés avec différents degrés d’opacité, de couleur et de filtres sur des images « fixes dans la fenêtre ». Ils fonctionneraient tout aussi bien si les blocs étaient des éléments animés glissant au-dessus d’autres contenus de la page lors du défilement.

Plusieurs images fixes dans la fenêtre

Dans l’exemple ci-dessous, plusieurs éléments ont été combinés dans un bloc de mise en page, chacun utilisant la MÊME image, tous étant fixes dans la fenêtre. Le bloc lui-même possède une image d’arrière-plan, fixe dans la fenêtre, avec un filtre de flou d’arrière-plan appliqué à 4x. Ensuite, un bloc a été ajouté avec un remplissage image, des angles arrondis et une bordure blanche. Là encore, l’image était fixe dans la fenêtre, mais sans filtre d’arrière-plan appliqué. Nous avons ensuite ajouté le bloc translucide pour couvrir environ 50 % du bloc à contour. Ce bloc n’a pas de remplissage, mais possède un filtre de flou d’arrière-plan appliqué à 8x. Enfin, le texte « Dépoli » a été ajouté au-dessus du bloc translucide. Le texte utilise l’effet « Rogner au texte », en utilisant la même image que tous les autres éléments. Là encore, l’image a été définie comme fixe dans la fenêtre. Le texte blanc est simplement un bloc de texte normal ajouté par-dessus l’ensemble du bloc de mise en page. Le résultat final donne l’impression d’une seule image avec différents degrés de flou, tandis que le mot « Dépoli » semble gravé dans un panneau de verre dépoli, laissant apparaître l’image sous-jacente avec une netteté parfaite.