Créez des arrière-plans semblables à ceux de l'OS avec le filtre de fond

Floutage et changement de couleur derrière un élément.

La translucidité, le floutage et d'autres effets sont des moyens utiles de créer de la profondeur tout en conservant le contexte du contenu en arrière-plan. Elles sont compatibles avec de nombreux cas d'utilisation, tels que le verre dépoli, les superpositions vidéo, les en-têtes de navigation translucides, la censure d'image inappropriée, le chargement d'images, etc. Vous reconnaissez peut-être ces effets à partir de deux systèmes d'exploitation courants: Windows 10 et iOS.

Auparavant, ces techniques étaient difficiles à mettre en œuvre sur le Web et nécessitaient des piratages ou des solutions de contournement parfaits. Ces dernières années, Safari et Edge ont tous deux fourni ces fonctionnalités via la propriété background-filter (et également -webkit-backdrop-filter), qui mélange dynamiquement les couleurs de premier plan et d'arrière-plan en fonction des fonctions de filtre. Chrome est désormais compatible avec background-filter à partir de la version 76.

Prise en charge des navigateurs

Pour des raisons de performances, revenez à une image au lieu d'un polyfill lorsque backdrop-filter n'est pas accepté. L'exemple ci-dessous le montre.

@supports (backdrop-filter: none) {
    .background {
        backdrop-filter: blur(10px);
    }
}

@supports not (backdrop-filter: none) {
  .background {
    background-image: blurred-hero.png;
  }
}

Principes de base

• La propriété backdrop-filter applique un ou plusieurs filtres à un élément, en modifiant l'apparence de tout ce qui se trouve derrière l'élément.
• L'élément superposé doit être au moins partiellement transparent.
• L'élément superposé reçoit un nouveau contexte d'empilement.

Le CSS backdrop-filter applique un ou plusieurs effets à un élément translucide ou transparent. Pour le comprendre, tenez compte des images ci-dessous.

L'image de gauche montre comment les éléments qui se chevauchent seraient affichés si backdrop-filter n'était pas utilisé ou pris en charge. L'image de droite applique un effet de floutage à l'aide de backdrop-filter. Notez qu'elle utilise opacity en plus de backdrop-filter. Sans opacity, il n'y aurait rien à quoi appliquer un floutage. Il va presque sans dire que si opacity est défini sur 1 (entièrement opaque), il n'y aura aucun effet sur l'arrière-plan.

La propriété backdrop-filter est semblable aux filtres CSS, dans la mesure où toutes vos fonctions de filtre préférées sont compatibles: blur(), brightness(), contrast(), opacity(), drop-shadow(), etc. Il accepte également la fonction url() si vous souhaitez utiliser une image externe comme filtre, ainsi que les mots clés none, inherit, initial et unset. MDN offre des explications sur tous ces éléments, y compris des descriptions de syntaxe, de filtres et de valeurs.

Lorsque backdrop-filter est défini sur une valeur autre que none, le navigateur crée un contexte d'empilement. Un bloc conteneur peut également être créé, mais uniquement si l'élément a des descendants de position absolues et fixes.

Vous pouvez combiner des filtres pour obtenir des effets riches et intelligents, ou utiliser un seul filtre pour des effets plus subtils ou plus précis. Vous pouvez même les combiner avec des filtres SVG.

Exemples

Les techniques et styles de conception précédemment réservés aux systèmes d'exploitation sont désormais performants et réalisables avec une seule déclaration CSS. Examinons quelques exemples.

Filtre unique

Dans l'exemple suivant, l'effet de givre est obtenu en combinant la couleur et le flou. Le flou est fourni par backdrop-filter, tandis que la couleur provient de la couleur d'arrière-plan semi-transparente de l'élément.

.blur-behind-me {
  background-color: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(.5rem);
}

Plusieurs filtres

Parfois, vous aurez besoin de plusieurs filtres pour obtenir l'effet souhaité. Pour ce faire, fournissez une liste de filtres séparés par un espace. Exemple :

.brighten-saturate-and-blur-behind-me {
  backdrop-filter: brightness(150%) saturate(150%) blur(1rem);
}

Dans l'exemple suivant, chacun des quatre volets a une combinaison différente de filtres d'arrière-plan, tandis que le même ensemble de formes est animé derrière eux.

Superpositions

Cet exemple montre comment flouter un arrière-plan semi-transparent pour rendre le texte lisible tout en le fusionnant de manière stylistique avec l'arrière-plan d'une page.

.modal {
  backdrop-filter: blur(10px);
  background-color: rgba(255, 255, 255, 0.5);
}

Contraste du texte sur les arrière-plans dynamiques

Comme indiqué précédemment, backdrop-filter permet des effets performants qui sont difficiles ou impossibles sur le Web. Par exemple, vous pouvez modifier un arrière-plan en réponse à une animation. Dans cet exemple, backdrop-filter conserve le contraste élevé entre le texte et son arrière-plan, malgré ce qui se passe derrière le texte. Il commence par la couleur d'arrière-plan par défaut darkslategray et utilise backdrop-filter pour inverser les couleurs après la transformation.

.container::before {
  z-index: 1;
  background-color: darkslategray;
  filter: invert(1);
}

.container::after {
    backdrop-filter: invert(1);
  z-index: 3;
}

Conclusion

Plus de 560 d'entre vous ont voté pour le bug Chromium ces dernières années, indiquant clairement qu'il s'agit d'une fonctionnalité CSS tant attendue. Avec la sortie de backdrop-filter dans la version 76 de Chrome, le Web se rapproche un peu plus d'une interface utilisateur véritablement semblable à celle d'un système d'exploitation.

Autres ressources

• Spécification
• État de la plate-forme Chrome
• MDN
• background-filter sur CSS Tricks
• Exemples sur Codepen