Floutage et décalage des couleurs derrière un élément
Auparavant, ces techniques étaient difficiles à mettre en œuvre sur le Web, et nécessitaient des solutions de piratage ou de contournement moins que parfaites. Ces dernières années, Safari et Edge ont fourni ces fonctionnalités via la propriété background-filter (et alternativement -webkit-backdrop-filter), qui combine de manière dynamique les couleurs de premier plan et d'arrière-plan en fonction de fonctions de filtrage. Chrome est désormais compatible avec background-filter, à partir de la version 76.
backdrop-filter. Essayez cet exemple sur CodePen.
Prise en charge des navigateurs
Pour des raisons de performances, utilisez 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-filterapplique 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 en superposition doit être au moins partiellement transparent.
- L'élément en superposition obtient un nouveau contexte d'empilement.
Le CSS backdrop-filter applique un ou plusieurs effets à un élément translucide ou transparent. Pour comprendre cela, examinez les images ci-dessous.
.frosty-glass-pane {
backdrop-filter: blur(2px);
}
.frosty-glass-pane {
opacity: .9;
backdrop-filter: blur(2px);
}
L'image de gauche montre comment les éléments qui se chevauchent seraient affichés si backdrop-filter n'était pas utilisé ou accepté. L'image de droite applique un effet de floutage à l'aide de backdrop-filter. Notez qu'il utilise opacity en plus de backdrop-filter. Sans opacity, il n'y aurait aucun floutage. Il va 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 filtrage préférées sont compatibles: blur(), brightness(), contrast(), opacity(), drop-shadow(), etc. Elle 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. Dans MDN, toutes ces informations sont expliquées, notamment en ce qui concerne la syntaxe, les filtres et les valeurs.
Lorsque backdrop-filter est défini sur une valeur autre que none, le navigateur crée un contexte d'empilement. Un bloc contenant peut également être créé, mais uniquement si l'élément a des descendants de position absolus et fixes.
Vous pouvez combiner des filtres pour obtenir des effets riches et intelligents, ou n'en utiliser qu'un seul pour obtenir des effets plus subtils ou plus précis. Vous pouvez même les combiner avec des filtres SVG.
Exemples
Les techniques de conception et les styles auparavant 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, plusieurs filtres sont nécessaires 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 présente une combinaison différente de filtres d'arrière-plan, tandis que le même ensemble de formes est animé en arrière-plan.
Superpositions
Cet exemple montre comment flouter un arrière-plan semi-transparent pour rendre le texte lisible tout en se fondant stylistiquement 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 seraient difficiles, voire impossibles, sur le Web. La modification d'un arrière-plan en réponse à une animation en est un exemple. 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. Elle 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 de Chromium au cours des dernières années, ce qui a clairement marqué cette fonctionnalité comme une fonctionnalité CSS très attendue. Avec la sortie de la version 76 d'backdrop-filter dans Chrome, le Web se rapproche plus d'une interface utilisateur vraiment semblable à un système d'exploitation.