Le Glassmorphism, design en toute transparence

Le « Glassmorphism » c’est une tendance du webdesign que l’on commence à voir un peu partout, qui crée un effet de transparence des blocs. Il est utilisé par de nombreux site et interface informatique tel que les OS d’Apple.
Comme le neumorphism il s’inscrit dans une tendance futuriste calme est épuré, il est très souvent associé à des dégradés de couleurs.
Parfait pour donner du style a vos interfaces de type, catalogue d’article de vente, page de contact.

Comment fait-on du glassmorphism ?

Pour faire du glassmorphism il vous faut déjà un navigateur capable de le comprendre. En effet, à l’heure ou j’écris cet article Firefox n’est pas capable de comprendre le comprendre l’instruction CSS qui fait toute la différence sur ce type d’effet.
Nous pourrions très bien utilisé juste une couleur de fond du bloc en RGBA avec une opacité réduite, et ça fonctionne, mais un ingrédient manque, c’est la commande CSS backdrop-filter.
Cela permet d’affecter un effet au fond d’une div sans affecter sont contenu, au backdrop-filter nous ajoutons la mention « blur » pour flouter le fond. Cela donne un effet de réfraction qui évoque une vitre un peu épaisse.

La recette d’un Glassmorphism réussi

• Un fond sous le bloc transparent, très souvent un dégradé complexe, plus 3 couleurs et incliné.
• Un bloc texte qui pour aura pour couleur de fond un blanc presque transparent (exemple : background: rgba(255,255,255,0.1);)
• Une bordure avec un blanc qui sera un peu transparent (exemple : border: 1px solid rgba(255,255,255, 0.2);)
• Un border-radius
• Et l’ingrédient qui fait la différence le backdrop-filter (exemple : backdrop-filter: blur(30px);)
• Pour ajouter un effet de superposition, il ne manque plus qu’un léger box-shadow, toujours à utiliser avec légèreté, car mal proportionné le box shadow au lieu de donner un aspect relief, donnera un aspect sale et mal maitrisé.

See the Pen Glass Design by josuao (@josuao) on CodePen.

Conclusion

Cette tendance que l’on retrouve un peu partout est asse simple à mettre un œuvre cependant elle utilise une fonction de CSS qui n’est pas encore adapté a tous les navigateurs, soyez assez prudent lorsque vous l’utilisez.
Superposer un texte et une photo cela peu effectivement être une bonne idée si derrière le flou du backdrop fonctionne.