Générateur CSS de glassmorphism

 (ui.glass)
7 points par xguru 2021-08-29 | 2 commentaires | Partager sur WhatsApp

  • Tendance de design d’interface utilisée sur macOS Big Sur / Windows 11

  • Affiche l’arrière-plan de l’élément supérieur sous forme d’image/couleur/motif flou situé en dessous

→ utilisation de backdrop-filter: blur()

  • Possibilité de définir une image/couleur/gradient de fond et d’ajuster la valeur de flou, la transparence et la saturation

À lire aussi

2 commentaires

 
galadbran 2021-08-29

Je trouvais ça bizarre parce que même en changeant les valeurs de blur et de saturation, rien ne changeait. En fait, ça fonctionne bien sur Edge, mais pas sur Firefox... haha
 
joyfui 2021-08-29

J’utilise aussi Firefox, donc je me demandais quelle était la différence, mais en fait Firefox ne le prenait pas encore en charge par défaut..

https://developer.mozilla.org/ko/docs/Web/CSS/backdrop-filter

Apparemment, cela fonctionne si l’on modifie le paramètre about:config.