Flouter un fond à la MacOS avec du CSS

By Léo Penaguin 14 juillet 2019

J’ai découvert aujourd’hui une façon de flouter les éléments se trouvant derrière un composant avec la propriété « backdrop-filter ». 

Avant toute chose, à l’heure où j’écris ce poste cette propriété de CSS est considéré comme expérimentale. Pour ceux qui n’ont aucune idée de l’effet dont je parle, voilà un petit aperçu sur MacOS.

J’aime beaucoup cet effet, vivement qu’il atterrisse sur les versions stable des navigateurs.

Voilà comment faire

Imaginons que vous ayez un élément « div.container » qui contient deux éléments « img » et un élément « div.title » :

.container {
    position: relative;
}
.container img {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
}
.container .title {
    position: absolute;
    bottom: 0; left: 0;
    width: 100%;
    background: rgba(0,0,0,0.3);
    backdrop-filter: blur(5px);
}

Avec ce style, l’élément « title » s’affiche au-dessus de img et rend floue la partie de l’image qui se trouve dessous.

Can I use it ?

Non… Probablement pas avant quelques mois : https://caniuse.com/#feat=css-backdrop-filter. Ce site est très utile pour avoir un aperçu du support d’une fonctionnalité par les navigateurs.

Toutes les prochaines versions des navigateurs les plus importants vont supporter cette nouvelle fonctionnalité a part Firefox. Le navigateur représente environ 5% des utilisateurs, ce n’est pas beaucoup mais ca va dissuader beaucoup de monde d’utiliser backdrop-filter. Si vous voulez vraiment l’utiliser, rien ne vous empêche de styliser vos éléments pour qu’il s’affiche différemment sur ce navigateur, en tout cas, c’est ce que je vais faire 😜.

À la prochaine !

Commentaires 💬