diff options
| -rw-r--r-- | files/fr/web/css/backdrop-filter/index.md | 57 |
1 files changed, 27 insertions, 30 deletions
diff --git a/files/fr/web/css/backdrop-filter/index.md b/files/fr/web/css/backdrop-filter/index.md index 2db24c66f7..c54bc1f6c2 100644 --- a/files/fr/web/css/backdrop-filter/index.md +++ b/files/fr/web/css/backdrop-filter/index.md @@ -1,15 +1,12 @@ --- title: backdrop-filter slug: Web/CSS/backdrop-filter -tags: - - CSS - - Propriété - - Reference translation_of: Web/CSS/backdrop-filter +browser-compat: css.properties.backdrop-filter --- -{{CSSRef}}{{SeeCompatTable}} +{{CSSRef}} -La propriété CSS **`backdrop-filter`** permet d'obtenir un effet de flou ou de diffusion de la couleur sur la zone derrière l'élément. L'effet étant situé _derrière_ l'élément, il pourra être observé en ajustant la transparence de l'élément. +La propriété [CSS](/fr/docs/Web/CSS) **`backdrop-filter`** permet d'obtenir un effet de flou ou de diffusion de la couleur sur la zone derrière l'élément. L'effet étant situé _derrière_ l'élément, il pourra être observé en ajustant la transparence de l'élément. ```css /* Valeur avec un mot-clé */ @@ -37,11 +34,10 @@ backdrop-filter: url(filters.svg#filter) blur(4px) saturate(150%); /* Valeurs globales */ backdrop-filter: inherit; backdrop-filter: initial; +backdrop-filter: revert; backdrop-filter: unset; ``` -{{cssinfo}} - ## Syntaxe ### Valeurs @@ -49,25 +45,39 @@ backdrop-filter: unset; - `none` - : Un mot-clé qui indique qu'aucun filtre n'est appliqué sur l'ombre portée. - `<filter-function-list>` - - : Une liste de fonctions de filtre (cf. {{cssxref("<filter-function>")}}), séparées par des espaces et qui seront appliquées à l'ombre. Les différentes fonctions qui peuvent être utilisées sont les mêmes que pour la propriété {{cssxref("filter")}}. On peut également utilisere [un filtre SVG](/fr/docs/Web/SVG/Element/filter). + - : Une liste de fonctions de filtre (cf. [`<filter-function>`](/fr/docs/Web/CSS/filter-function)), séparées par des espaces et qui seront appliquées à l'ombre. On peut également utiliser [un filtre SVG](/fr/docs/Web/SVG/Element/filter). + +## Définition formelle -### Syntaxe formelle +{{CSSInfo}} + +## Syntaxe formelle {{csssyntax}} ## Exemples +### HTML + +```html +<div class="container"> + <div class="box"> + <p>backdrop-filter: blur(10px)</p> + </div> +</div> +``` + ### CSS ```css .box { - background-color: rgba(255, 255, 255, 0.95); + background-color: rgba(255, 255, 255, 0.3); border-radius: 5px; font-family: sans-serif; text-align: center; line-height: 1; - backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); + backdrop-filter: blur(10px); max-width: 50%; max-height: 50%; padding: 20px 40px; @@ -79,7 +89,7 @@ html, body { } body { - background-image: url('https://lorempixel.com/400/200/'); + background-image: url(https://picsum.photos/id/1080/6858/4574), linear-gradient(rgb(219, 166, 166), rgb(0, 0, 172)); background-position: center center; background-repeat: no-repeat; background-size: cover; @@ -94,31 +104,18 @@ body { } ``` -### HTML - -```html -<div class="container"> - <div class="box"> - <p>backdrop-filter: blur(10px)</p> - </div> -</div> -``` - ### Résultat -{{EmbedLiveSample('Exemples', "600", "400")}} +{{EmbedLiveSample('', 600, 400)}} ## Spécifications -| Spécification | État | Commentaires | -| ------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------- | -| {{SpecName('Filters 2.0', '#BackdropFilterProperty', 'backdrop-filter')}} | {{Spec2('Filters 2.0')}} | Définition initiale. | +{{Specifications}} ## Compatibilité des navigateurs -{{Compat("css.properties.backdrop-filter")}} +{{Compat}} ## Voir aussi -- {{cssxref("filter")}} -- [Construire des effets de transparences comme sur iOS avec `backdrop-filter` (en anglais)](https://product.voxmedia.com/til/2015/2/17/8053347/css-ios-transparency-with-webkit-backdrop-filter) +- [`filter`](/fr/docs/Web/CSS/filter) |