#21872 - iOS Crystalline Blurred Backgrounds with CSS Backdrop Filters
https://fjolt.com/article/css-ios-crystalline-effect-backdrop-filterJe me note ça, un effet sympa en CSS : des fenêtres semi-tranparentes avec un effet verre fumé :
#laFenêtre {
background-color: rgba(255, 255, 255, .7);
backdrop-filter: blur(33px);
}
C’est inspiré de ce que fait MacOS / iOS essentiellement, mais ça pourrait s’appliquer ailleurs. Perso je suis très fan du Material Design de chez Google, mais avec le temps ils perdent un peu leur philosophie où les choses sont basées sur les matériaux et la réalité. C’est tout devenu plastique et arrondi, et ça n’a plus le sens initial.
Le retour des thèmes façon « verre » ou « cristal » qu’on avait au milieu des années 2000 me plaît bien, et ici y a donc l’effet verre-fumé.
Ici, il faut bien noter que la fênêtre est semi-transparente (d’où un fond en RGBA), et c’est ce qui est vu à travers qui est flouté. La fenêtre elle-même et le texte contenu dedans ne sont eux pas floutés. Ni le fond de la page sur lequel est posée la fenêtre. La seule chose floue ce qui se trouve sous la fenêtre
On peut imagine l’inverse, c’est à dire une fenêtre opaque, et où on floute tout le reste. Ça ferait ressortir la fenêtre opaque (pour une fenêtre modale par exemple).
C’est ce que je fais ici : https://lehollandaisvolant.net/tout/tools/post-it/