iOS est plein de cool cristalline effets de verre. Cet effet a longtemps été facile à réaliser lorsque vous avez un accès facile aux shaders graphiques, car ceux-ci peuvent faire le gros du travail en termes de calcul de ce qui se trouve sous le calque et de flou au premier plan. Cependant, pendant longtemps, cela n’était pas possible en CSS… jusqu’à maintenant.
Dans les spécifications plus récentes de CSS, nous avons finalement obtenu backdrop-filter. Principalement destiné aux modaux, il a également des applications sur des listes déroulantes stylisées qui sont courantes sur le Web.
Dans ce tutoriel, nous verrons comment faire un effet de verre flou teinté avec juste du CSS moderne.
Comment ça fonctionne
Pour mettre en évidence exactement à quoi cela ressemble, j’ai mis en place une démo de la fonctionnalité. Remarque : comme indiqué dans les tableaux de support en bas, Firefox ne les affichera pas correctement – il vaut donc mieux vérifier dans un navigateur Webkit ou Blink comme Chome ou Safari.
Chacun d’eux utilise du CSS pur, mais vous pouvez voir l’image d’arrière-plan se brouiller jusqu’à la liste déroulante, créant un effet cristallin, transparent et flou assez cool.
Pour mieux comprendre comment cela fonctionne, j’ai copié le code ci-dessous. La propriété CSS sur le style de notification à extraire est backdrop-filter – cela applique un filtre au calque d’arrière-plan. Nous pouvons utiliser n’importe quel filtre ici, mais ici nous utilisons blur(33px) pour brouiller la couleur d’arrière-plan transparente.
CSS
.effect-holder {
height: auto;
width: calc(33.3% - 1rem);
border-radius: 16px;
float: left;
background-size: 100%;
background-repeat: no-repeat;
background-image: url(image.png);
}
.dropdown-style {
margin: 0 1rem 0 0;
background-color: #ffffff7d;
margin: 2rem;
border-radius: 12px;
padding: 1rem;
position: relative;
box-shadow: 0 10px 15px rgb(0 0 0 / 20%);
box-sizing: border-box;
width: calc(100% - 4rem);
color: rgba(0,0,0,0.8);
backdrop-filter: blur(33px);
background-blend-mode: overlay;
display: flex;
align-items: center;
}
.dropdown-style > img {
width: 32px;
margin: 0 1rem 0 0;
}HTML
<div class="effects">
<div class="effect-holder">
<div class="dropdown-style">
<img src="" alt="">
<span>Some Message</span>
</div>
</div>
<div class="effect-holder dark">
<div class="dropdown-style black">
<img src="" alt="">
<span>Some Message</span>
</div>
</div>
<div class="effect-holder">
<div class="dropdown-style black">
<img src="" alt="">
<span>Some Message</span>
</div>
</div>
</div>Autres filtres et modes de mixage
Puisque nous pouvons utiliser backdrop-filter fonctionne de la même manière que filter, et nous avons également accès à mix-blend-mode, nous pouvons faire d’autres effets sympas. Voici un exemple avec du texte transparent en utilisant un alléger mode de fusion:
.el {
mix-blend-mode: lighten;
backdrop-filter: blur(33px);
}Le centre de notifications
Ce n’était pas vraiment suffisant pour moi d’essayer de l’utiliser pour faire une simple démo de style notification. Alors j’ai essayé quelque chose d’un peu plus gros et j’ai fait le centre de notification Mac OS utilisant cet effet. Cela n’imite pas exactement ce qu’ils ont là-bas, mais c’est un bon exemple de la façon dont cet effet pourrait être déployé dans des expériences utilisateur frontales plus complexes.
Soutien
Comme pour toutes les nouvelles fonctionnalités, backdrop-filter n’a pas de support complet. Cependant, il a suffisamment de soutien pour justifier son utilisation dans des projets aujourd’hui. Le seul navigateur majeur sans prise en charge est Firefox, qui peut être activé dans les drapeaux Firefox pour expérimentation.
Conclusion
Cette nouvelle propriété CSS est plutôt soignée et se dégrade gracieusement dans les navigateurs qui ne la prennent pas en charge. J’espère que ce petit aperçu vous a plu. Si vous souhaitez voir le code source de la démo finale, consultez-le via le lien Codepen ici.