From b7377bf12be68aaf930b27417ecf9267e92783cb Mon Sep 17 00:00:00 2001 From: SphinxKnight Date: Mon, 2 Oct 2023 23:08:21 +0200 Subject: [PATCH] Fix #3752 for `fr` - Update `filter` page (#15786) * Update filter translation to finally fix #3752 * Review suggestions --- files/fr/web/css/filter/index.md | 1301 +++--------------------------- 1 file changed, 115 insertions(+), 1186 deletions(-) diff --git a/files/fr/web/css/filter/index.md b/files/fr/web/css/filter/index.md index 81d1d471ab0921..31cb09e2f08aa8 100644 --- a/files/fr/web/css/filter/index.md +++ b/files/fr/web/css/filter/index.md @@ -1,22 +1,21 @@ --- title: filter slug: Web/CSS/filter +l10n: + sourceCommit: 5c3c25fd4f2fbd7a5f01727a65c2f70d73f1880a --- -{{CSSRef}}{{SeeCompatTable}} +{{CSSRef}} -La propriété CSS **`filter`** permet d'appliquer des filtres et d'obtenir des effets graphiques de flou, de saturation, etc. Les filtres sont généralement utilisés pour ajuster le rendu d'une image, d'un arrière-plan ou des bordures. +La propriété [CSS](/fr/docs/Web/CSS) **`filter`** permet d'appliquer des filtres et d'obtenir des effets graphiques de flou, de saturation, etc. Les filtres sont généralement utilisés pour ajuster le rendu d'une image, d'un arrière-plan ou des bordures. -Plusieurs fonctions sont incluses dans le standard CSS et permettent d'obtenir des effets prédéfinis. Il est également possible d'utiliser un filtre SVG via une URL référençant [un élément SVG `filter`](/fr/docs/Web/SVG/Element/filter). +Plusieurs [fonctions](#fonctions) comme `blur()` et `contrast()` sont incluses dans le standard CSS et permettent d'obtenir des effets prédéfinis. {{EmbedInteractiveExample("pages/css/filter.html")}} ## Syntaxe ```css -/* URL vers un filtre SVG */ -filter: url("filters.svg#filter-id"); - /* Fonctions de filtre */ filter: blur(5px); filter: brightness(0.4); @@ -29,8 +28,12 @@ filter: opacity(25%); filter: saturate(30%); filter: sepia(60%); +/* URL vers un filtre SVG */ +filter: url("filters.svg#filter-id"); + /* On applique plusieurs filtres */ filter: contrast(175%) brightness(3%); +filter: drop-shadow(3px 3px red) sepia(100%) drop-shadow(-3px -3px blue); /* On utilise aucun filtre */ filter: none; @@ -39,13 +42,14 @@ filter: none; filter: inherit; filter: initial; filter: revert; +filter: revert-layer; filter: unset; ``` Avec une fonction, on utilisera la forme suivante : -```css -filter: [] * | none; +```css-nolint +filter: []* | none; ``` En utilisant un élément SVG [``](/fr/docs/Web/SVG/Element/filter), on utilisera la forme suivante : @@ -54,1206 +58,105 @@ En utilisant un élément SVG [``](/fr/docs/Web/SVG/Element/filter), on filter: url(file.svg#filter-element-id); ``` -### Interpolation - -Si les deux filtres possèdent chacun une liste de même longueur (sans [``](), chacune des fonctions est interpolée selon ses propres règles. Si les deux listes ont des longueurs différentes, les derniers filtres de la liste la plus longue sont utilisés avec leurs valeurs par défaut afin de compléter la liste la plus courte, ensuite chaque fonction est interpolée selon ses propres règles. Si un filtre vaut `none`, il est remplacé avec la fonction de filtre (avec ses valeurs par défaut) de l'autre liste puis l'ensemble des fonctions est interpolé selon les règles de chacune. Dans les autres cas, on utilise une interpolation discrète. - ## Fonctions -Pour utiliser la propriété CSS `filter`, on utilisera `none` ou une ou plusieurs des fonctions listées ci-après avec, pour chacune, un argument. Si la valeur est invalide, la fonction renverra `none`. Sauf mention contraire, les fonctions qui acceptent des valeurs exprimées en pourcentages (34%) acceptent également des valeurs décimales (0.34). +La propriété `filter` s'utilise avec le mot-clé `none` ou avec une à plusieurs fonctions parmi celles listées ensuite. Si le paramètre fourni à l'une de ces fonctions est invalide, la fonction reverra `none`. Sauf mention contraire, les fonctions qui acceptent une valeur exprimée en pourcentage (par exemple `34%`) acceptent également les valeurs exprimées en décimal (par exemple `0.34`). -Lorsqu'une seule propriété `filter` possède deux fonctions (ou plus), le résultat obtenu sera différent de l'application de deux propriétés `filter` (ou plus) séparées avec chacune une fonction. +Lorsque la valeur de la propriété `filter` contient plusieurs fonctions, les filtres sont appliqués dans l'ordre. -### `url()` +- [`blur()`](/fr/docs/Web/CSS/filter-function/blur) -La fonction `url()` prend comme argument l'emplacement d'un [élément SVG <filter> à appliquer](/fr/docs/Web/SVG/Element/filter). L'URL peut faire référence à une ancre d'un élément spécifique. Cet élément peut être embarqué dans un fichier XML externe. + - : Applique un [flou gaussien](https://en.wikipedia.org/wiki/Gaussian_blur) à l'image. -```css -filter: url(resources.svg#c1); -``` + ```css + filter: blur(5px); + ``` -### `blur()` +- [`brightness()`](/fr/docs/Web/CSS/filter-function/brightness) -Cette fonction applique un flou gaussien à l'image d'entrée. La valeur du paramètre correspond au rayon de flou (l'écart-type de la gaussienne) utilisé. Plus la valeur est importante, plus le flou sera prononcé. La valeur par défaut du paramètre est 0. Selon la spécification, le paramètre est une valeur de type [``](/fr/docs/Web/CSS/length) mais la fonction n'accepte pas de valeurs exprimées en pourcentages. + - : Rend l'image plus claire ou plus sombre en utilisant un coefficient multiplicateur. L'effet est linéaire : `0%` créera une image complètement noire, `100%` ne modifiera pas l'image et les valeurs supérieures à 100% rendront l'image plus claire. -```css -filter: blur(5px); -``` + ```css + filter: brightness(2); + ``` -```html hidden - - - - - - - - - - - - - - - - - -
Image originale - Exemple live - Équivalent SVGExemple statique
- - - - -
- - - - - - -
- 		- -
-``` - -```css hidden -html { - height: 100%; -} -body { - font: - 14px/1.286 "Lucida Grande", - "Lucida Sans Unicode", - "DejaVu Sans", - Lucida, - Arial, - Helvetica, - sans-serif; - color: rgb(51, 51, 51); - height: 100%; - overflow: hidden; -} -#img2 { - width: 100%; - height: auto; - -webkit-filter: blur(5px); - -ms-filter: blur(5px); - filter: blur(5px); -} -table.standard-table { - border: 1px solid rgb(187, 187, 187); - border-collapse: collapse; - border-spacing: 0; - margin: 0 0 1.286em; - height: 100%; - width: 85%; -} -table.standard-table th { - border: 1px solid rgb(187, 187, 187); - padding: 0px 5px; - background: none repeat scroll 0% 0% rgb(238, 238, 238); - text-align: left; - font-weight: bold; -} -table.standard-table td { - padding: 5px; - border: 1px solid rgb(204, 204, 204); - text-align: left; - vertical-align: top; - width: 25%; - height: auto; -} -#img3 { - height: 100%; -} -``` - -```svg - - - - - -``` +- [`contrast()`](/fr/docs/Web/CSS/filter-function/contrast) -{{EmbedLiveSample('','100%','236px','','', 'no-codepen')}} - -> **Note :** Voir [`blur()`]() pour plus d'informations. - -### `brightness()` - -La fonction [`brightness()`]() permet de modifier la luminosité d'une image grâce à un facteur linéaire. Un argument égal `0%` créera une image totalement noire et une valeur de `100%` conservera l'image d'entrée telle quelle. Il est possible d'utiliser des valeurs supérieures à `100%` afin d'obtenir des images saturées en luminosité. La valeur par défaut pour l'argument est `1`. - -```css -filter: brightness(2); -``` - -```svg - - - - - - - - - -``` - -```html hidden - - - - - - - - - - - - - - - - - -
Image originaleExemple liveÉquivalent SVGExemple statique
- - - - - - - - -
-``` - -```css hidden -html { - height: 100%; -} -body { - font: - 14px/1.286 "Lucida Grande", - "Lucida Sans Unicode", - "DejaVu Sans", - Lucida, - Arial, - Helvetica, - sans-serif; - color: rgb(51, 51, 51); - height: 100%; - overflow: hidden; -} -#img2 { - width: 100%; - height: auto; - -moz-filter: brightness(2); - -webkit-filter: brightness(2); - -ms-filter: brightness(2); - filter: brightness(2); -} -table.standard-table { - border: 1px solid rgb(187, 187, 187); - border-collapse: collapse; - border-spacing: 0px; - margin: 0px 0px 1.286em; - height: 100%; - width: 85%; -} -table.standard-table th { - border: 1px solid rgb(187, 187, 187); - padding: 0px 5px; - background: none repeat scroll 0% 0% rgb(238, 238, 238); - text-align: left; - font-weight: bold; -} -table.standard-table td { - padding: 5px; - border: 1px solid rgb(204, 204, 204); - text-align: left; - vertical-align: top; - width: 25%; - height: auto; -} -#img3 { - height: 100%; -} -``` - -{{EmbedLiveSample('','100%','231px','','', 'no-codepen')}} - -> **Note :** Voir [`brightness()`]() pour plus d'informations. - -### `contrast()` - -La fonction [`contrast()`]() permet d'ajuster le contraste de l'image d'entrée. Une valeur de `0%` créera une image entièrement grise. Une valeur de `100%` conservera l'image d'entrée telle quelle. Il est possible d'utiliser des valeurs supérieures à 100% pour augmenter le contraste. La valeur par défaut de l'argument est `1`. - -```css -filter: contrast(200%); -``` + - : Ajuste le contraste de l'image. Une valeur de `0%` rendra l'image grise, `100%` n'aura pas d'effet et les valeurs supérieures à `100%` renforceront le contraste. -```svg - - - - - - - - - -``` + ```css + filter: contrast(200%); + ``` -```html hidden - - - - - - - - - - - - - - - - - -
Image originaleExemple liveÉquivalent SVGExemple statique
- - - - - - - - -
-``` +- [`drop-shadow()`](/fr/docs/Web/CSS/filter-function/drop-shadow) -```css hidden -html { - height: 100%; -} -body { - font: - 14px/1.286 "Lucida Grande", - "Lucida Sans Unicode", - "DejaVu Sans", - Lucida, - Arial, - Helvetica, - sans-serif; - color: rgb(51, 51, 51); - height: 100%; - overflow: hidden; -} -#img2 { - width: 100%; - height: auto; - -moz-filter: contrast(200%); - -webkit-filter: contrast(200%); - -ms-filter: contrast(200%); - filter: contrast(200%); -} -table.standard-table { - border: 1px solid rgb(187, 187, 187); - border-collapse: collapse; - border-spacing: 0px; - margin: 0px 0px 1.286em; - width: 85%; - height: 100%; -} -table.standard-table th { - border: 1px solid rgb(187, 187, 187); - padding: 0px 5px; - background: none repeat scroll 0% 0% rgb(238, 238, 238); - text-align: left; - font-weight: bold; -} -table.standard-table td { - padding: 5px; - border: 1px solid rgb(204, 204, 204); - text-align: left; - vertical-align: top; - width: 25%; - height: auto; -} -#img3 { - height: 100%; -} -``` + - : Applique une ombre portée suivant les contours de l'image. Son paramètre suit la même syntaxe que celle de la propriété [`box-shadow`](/fr/docs/Web/CSS/box-shadow) (définie dans le module [Arrière-plans et bordures CSS](/fr/docs/Web/CSS/CSS_backgrounds_and_borders)), sauf que le mot-clé `inset` et le paramètre `spread` ne sont pas autorisés. Tous les filtres appliqués après `drop-shadow()` sont appliqués à l'ombre portée également. -{{EmbedLiveSample('','100%','203px','','', 'no-codepen')}} + ```css + filter: drop-shadow(16px 16px 10px black); + ``` -> **Note :** Voir [`contrast()`]() pour plus d'informations. +- [`grayscale()`](/fr/docs/Web/CSS/filter-function/grayscale) -### `drop-shadow()` + - : Convertit l'image en niveaux de gris. Un argument de `100%` rendra l'image uniquement avec des niveaux de gris. Un argument de `0%` ne modifiera pas l'image d'entrée. Les valeurs entre `0%` et `100%` appliquent un effet proportionnel. -La fonction [`drop-shadow()`]() permet d'appliquer une ombre portée à l'image d'entrée. Une ombre portée est une version décalée, dans une couleur donnée, du canal alpha de l'image qui est affiché sous celle-ci. La fonction peut accepter une valeur de type [``](/fr/docs/Web/CSS/shadow) (définie dans la spécification CSS3 sur les arrière-plans), une exception : les mots-clés `inset` et `spread` ne sont pas autorisés. Cette fonction est semblable à la propriété [`box-shadow`](/fr/docs/Web/CSS/box-shadow) plus répandue ; seule différence : les navigateurs utilisent parfois l'accélération matérielle pour les filtres ce qui peut permettre d'obtenir de meilleures performances. Les paramètres de l'argument `` sont les suivants : + ```css + filter: grayscale(100%); + ``` -- `` `` (nécessaire) - - : Deux valeurs [``](/fr/docs/Web/CSS/length) qui indiquent le décalage de l'ombre portée. `` définit la distance horizontale : des valeurs négatives décaleront l'ombre à gauche de l'élément. `` définit la distance verticale : des valeurs négatives décaleront l'ombre au-dessus de l'élément. Se référer à la page [``](/fr/docs/Web/CSS/length) pour les différentes unités utilisables. - Si les deux valeurs sont nulles, l'ombre sera exactement placée sous l'élément (et pourra servir à générer un effet de flou si `` et/ou `` sont utilisés). -- `` (optionnel) - - : Une troisième valeur de type [``](/fr/docs/Web/CSS/length). Plus la valeur sera grande, plus le flou sera important (l'ombre sera plus grande et moins prononcée). Les valeurs négatives ne sont pas autorisées. La valeur par défaut est `0`, le bord de l'ombre sera droit. -- `` (optionnel) - - : Une quatrième valeur de type [``](/fr/docs/Web/CSS/length). Des valeurs positives agrandiront l'ombre et les valeurs négatives réduiront l'ombre. La valeur par défaut est `0` (l'ombre aura la même taille que l'élément). Note: Webkit, and maybe other browsers, do not support this 4th length; it will not render if added. -- `` (optionnel) - - : Voir [``](/fr/docs/Web/CSS/color_value) pour les mots-clés et notations possibles. Si ce paramètre n'est pas défini, la couleur choisie dépendra du navigateur. Pour Gecko (Firefox), Presto (Opera) et Trident (Internet Explorer), la valeur de la propriété [`color`](/fr/docs/Web/CSS/color) est utilisée. Pour WebKit, si la couleur est absente, l'ombre sera transparente (donc inutile). +- [`hue-rotate()`](/fr/docs/Web/CSS/filter-function/hue-rotate) -```css -filter: drop-shadow(16px 16px 10px black); -``` + - : Applique une rotation de teinte. L'argument angulaire définit le nombre de degrés pour la rotation sur le cercle des teintes. Une valeur de `0deg` n'aura pas d'effet sur l'image. -```svg - - - - - - - - - - - - -``` + ```css + filter: hue-rotate(90deg); + ``` -```html hidden - - - - - - - - - - - - - - - - - - - - - - - -
Image originaleExemple liveÉquivalent SVGExemple statique
-
- - - - - - - - - - - -
-
test_form_4 distorted border - Image originaletest_form_4 distorted border - Exemple <i lang=live" id="img12" class="internal default" src="test_form_4_irregular-shape_opacity-gradient.png" style="width: 100%;" /> -
- - - - - - - - - - - - - - -
- 		test_form_4 distorted border drop shadow - Exemple statique
-``` +- [`invert()`](/fr/docs/Web/CSS/filter-function/invert) -```css hidden -html { - height: 100%; -} -body { - font: - 14px/1.286 "Lucida Grande", - "Lucida Sans Unicode", - "DejaVu Sans", - Lucida, - Arial, - Helvetica, - sans-serif; - color: rgb(51, 51, 51); - height: 100%; - overflow: hidden; -} -#img2 { - width: 100%; - height: auto; - -moz-filter: drop-shadow(16px 16px 10px black); - -webkit-filter: drop-shadow(16px 16px 10px black); - -ms-filter: drop-shadow(16px 16px 10px black); - filter: drop-shadow(16px 16px 10px black); -} -#img12 { - width: 100%; - height: auto; - -moz-filter: drop-shadow(8px 9px 5px rgba(0, 0, 0, 0.8)); - -webkit-filter: drop-shadow(8px 9px 5px rgba(0, 0, 0, 0.8)); - -ms-filter: drop-shadow(8px 9px 5px rgba(0, 0, 0, 0.8)); - filter: drop-shadow(8px 9px 5px rgba(0, 0, 0, 0.8)); -} -table.standard-table { - border: 1px solid rgb(187, 187, 187); - border-collapse: collapse; - border-spacing: 0px; - margin: 0px 0px 1.286em; - width: 85%; - height: 100%; -} -#irregular-shape { - width: 64%; -} -table.standard-table th { - border: 1px solid rgb(187, 187, 187); - padding: 0px 5px; - background: none repeat scroll 0% 0% rgb(238, 238, 238); - text-align: left; - font-weight: bold; -} -table.standard-table td { - padding: 5px; - border: 1px solid rgb(204, 204, 204); - text-align: left; - vertical-align: top; - width: 25%; - height: auto; -} -#img3, -#img13 { - width: 100%; - height: auto; -} -``` + - : Inverse les couleurs de l'image. Si l'argument vaut `100%`, on obtiendra le négatif complet de l'image. Si l'argument vaut `0%`, l'image sera inchangée. Les valeurs entre `0%` et `100%` ont des effets proportionnels. -{{EmbedLiveSample('','100%','400px','','', 'no-codepen')}} + ```css + filter: invert(100%); + ``` -> **Note :** Voir [`drop-shadow()`]() pour plus d'informations. +- [`opacity()`](/fr/docs/Web/CSS/filter-function/opacity) -### `grayscale()` + - : Applique un niveau de transparence. Un coefficient de `0%` rendra l'image complètement transparente tandis qu'un coefficient de `100%` laissera l'image inchangée. -Avec la fonction [`grayscale()`](), l'image d'entrée est convertie en niveau de gris. La valeur de l'argument définit la force de cette conversion. En utilisant une valeur de `100%` sera complètement en niveaux de gris. `0%` conservera l'image telle quelle. La valeur par défaut du paramètre est `0`. + ```css + filter: opacity(50%); + ``` -```css -filter: grayscale(100%); -``` +- [`saturate()`](/fr/docs/Web/CSS/filter-function/saturate) -```html hidden - - - - - - - - - - - - - - - - - -
Image originaleExemple liveÉquivalent SVGExemple statique
- - - - -
-``` + - : Sature l'image. Avec un coefficient de `0%`, l'image sera complètement désaturée. `100%` n'aura pas d'effet sur l'image. Les valeurs supérieures à `100%` augmenteront la saturation. -```css hidden -html { - height: 100%; -} -body { - font: - 14px/1.286 "Lucida Grande", - "Lucida Sans Unicode", - "DejaVu Sans", - Lucida, - Arial, - Helvetica, - sans-serif; - color: rgb(51, 51, 51); - height: 100%; - overflow: hidden; -} -#img2 { - width: 100%; - height: auto; - -moz-filter: grayscale(100%); - -webkit-filter: grayscale(100%); - -ms-filter: grayscale(100%); - filter: grayscale(100%); -} -table.standard-table { - border: 1px solid rgb(187, 187, 187); - border-collapse: collapse; - border-spacing: 0px; - margin: 0px 0px 1.286em; - width: 85%; - height: 100%; -} -table.standard-table th { - border: 1px solid rgb(187, 187, 187); - padding: 0px 5px; - background: none repeat scroll 0% 0% rgb(238, 238, 238); - text-align: left; - font-weight: bold; -} -table.standard-table td { - padding: 5px; - border: 1px solid rgb(204, 204, 204); - text-align: left; - vertical-align: top; - width: 25%; - height: auto; -} -#img3 { - height: 100%; -} -``` + ```css + filter: saturate(200%); + ``` -{{EmbedLiveSample('','100%','209px','','', 'no-codepen')}} +- [`sepia()`](/fr/docs/Web/CSS/filter-function/sepia) -> **Note :** Voir [`grayscale()`]() pour plus d'informations. + - : Convertit l'image en sépia. Un coefficient de `100%` rendra l'image complètement sépia tandis qu'un coefficient `0%` n'aura pas d'effet sur l'image. -### `hue-rotate()` + ```css + filter: sepia(100%); + ``` -La fonction [`hue-rotate()`]() applique une rotation de teinte à l'image d'entrée. La valeur de l'angle passé en argument définit le nombre de degrés parcouru sur le cercle des couleurs. Une valeur de `0deg` conservera l'image telle quelle. La valeur par défaut du paramètre est `0deg`. Il n'y a pas de valeur maximale pour l'argument, si une valeur supérieure à `360deg` est utilisée, ce sera la mesure de l'angle correspondante qui sera utilisée. +## Combiner les fonctions -```css -filter: hue-rotate(90deg); -``` - -```css -filter: hue-rotate(90deg); -``` - -```html hidden - - - - - - - - - - - - - - - - - -
Image originaleExemple liveÉquivalent SVGExemple statique
- - - - -
-``` - -```css hidden -html { - height: 100%; -} -body { - font: - 14px/1.286 "Lucida Grande", - "Lucida Sans Unicode", - "DejaVu Sans", - Lucida, - Arial, - Helvetica, - sans-serif; - color: rgb(51, 51, 51); - height: 100%; - overflow: hidden; -} -#img2 { - width: 100%; - height: auto; - -moz-filter: hue-rotate(90deg); - -webkit-filter: hue-rotate(90deg); - -ms-filter: hue-rotate(90deg); - filter: hue-rotate(90deg); -} -table.standard-table { - border: 1px solid rgb(187, 187, 187); - border-collapse: collapse; - border-spacing: 0px; - margin: 0px 0px 1.286em; - width: 85%; - height: 100%; -} -table.standard-table th { - border: 1px solid rgb(187, 187, 187); - padding: 0px 5px; - background: none repeat scroll 0% 0% rgb(238, 238, 238); - text-align: left; - font-weight: bold; -} -table.standard-table td { - padding: 5px; - border: 1px solid rgb(204, 204, 204); - text-align: left; - vertical-align: top; - width: 25%; - height: auto; -} -#img3 { - height: 100%; -} -``` - -```html - - - - - -``` - -{{EmbedLiveSample('','100%','221px','','', 'no-codepen')}} - -> **Note :** Voir [`hue-rotate()`]() pour plus d'informations. - -### `invert()` - -La fonction [`invert()`]() permet d'inverser les couleurs de l'image d'entrée. La valeur de l'argument définit la force de cette inversion. Une valeur de `100%` inversera complètement les couleurs (tel un négatif) et une valeur `0%` conservera l'image d'entrée telle quelle. La valeur par défaut de l'argument est `0`. - -```css -filter: invert(100%); -``` - -```html hidden - - - - - - - - - - - - - - - - - -
Image originaleExemple liveÉquivalent SVGExemple statique
- - - - - - - - -
-``` - -```css hidden -html { - height: 100%; -} -body { - font: - 14px/1.286 "Lucida Grande", - "Lucida Sans Unicode", - "DejaVu Sans", - Lucida, - Arial, - Helvetica, - sans-serif; - color: rgb(51, 51, 51); - height: 100%; - overflow: hidden; -} -#img2 { - width: 100%; - height: auto; - -moz-filter: invert(100%); - -webkit-filter: invert(100%); - -ms-filter: invert(100%); - filter: invert(100%); -} -table.standard-table { - border: 1px solid rgb(187, 187, 187); - border-collapse: collapse; - border-spacing: 0px; - margin: 0px 0px 1.286em; - width: 85%; - height: 100%; -} -table.standard-table th { - border: 1px solid rgb(187, 187, 187); - padding: 0px 5px; - background: none repeat scroll 0% 0% rgb(238, 238, 238); - text-align: left; - font-weight: bold; -} -table.standard-table td { - padding: 5px; - border: 1px solid rgb(204, 204, 204); - text-align: left; - vertical-align: top; - width: 25%; - height: auto; -} -#img3 { - height: 100%; -} -``` - -{{EmbedLiveSample('','100%','407px','','', 'no-codepen')}} - -> **Note :** Voir [`invert()`]() pour plus d'informations. - -### `opacity()` - -La fonction [`opacity()`]() permet de régler l'opacité de l'image d'entrée. La valeur de l'argument indique la force de l'opacité. Ainsi, une valeur de `0%` rendra l'image complètement transparente et une valeur de `100%` conservera l'image telle quelle. Les valeurs intermédiaires appliqueront des effets proportionnels. La valeur par défaut de l'argument est `1`. Cette fonction est proche de la propriété [`opacity`](/fr/docs/Web/CSS/opacity), toutefois, avec les filtres, certains navigateurs utilisent l'accélération matérielle, ce qui permet d'obtenir de meilleures performances. - -```css -filter: opacity(50%); -``` - -```html hidden - - - - - - - - - - - - - - - - - -
Image originaleExemple liveÉquivalent SVGExemple statique
- - - - - - -
-``` - -```css hidden -html { - height: 100%; -} -body { - font: - 14px/1.286 "Lucida Grande", - "Lucida Sans Unicode", - "DejaVu Sans", - Lucida, - Arial, - Helvetica, - sans-serif; - color: rgb(51, 51, 51); - height: 100%; - overflow: hidden; -} -#img2 { - width: 100%; - height: auto; - -moz-filter: opacity(50%); - -webkit-filter: opacity(50%); - -ms-filter: opacity(50%); - filter: opacity(50%); -} -table.standard-table { - border: 1px solid rgb(187, 187, 187); - border-collapse: collapse; - border-spacing: 0px; - margin: 0px 0px 1.286em; - width: 85%; - height: 100%; -} -table.standard-table th { - border: 1px solid rgb(187, 187, 187); - padding: 0px 5px; - background: none repeat scroll 0% 0% rgb(238, 238, 238); - text-align: left; - font-weight: bold; -} -table.standard-table td { - padding: 5px; - border: 1px solid rgb(204, 204, 204); - text-align: left; - vertical-align: top; - width: 25%; - height: auto; -} -#img3 { - height: 100%; -} -``` - -{{EmbedLiveSample('','100%','210px','','', 'no-codepen')}} - -> **Note :** Voir [`opacity()`]() pour plus d'informations. - -### `saturate()` - -La fonction [`saturate()`]() sature l'image d'entrée. La valeur de l'argument indique la force de la saturation. Une valeur de `0%` fera que l'image sera totalement désaturée et une valeur de `100%` conservera l'image d'entrée telle quelle. Les valeurs intermédiaires auront un effet linéaire. Il est possible d'utiliser des valeurs supérieures à `100%` pour obtenir un effet de sursaturation. La valeur par défaut de l'argument est `1`. - -```css -filter: saturate(200%); -``` - -```html hidden - - - - - - - - - - - - - - - - - -
Image originaleExemple liveÉquivalent SVGExemple statique
- - - - -
-``` - -```css hidden -html { - height: 100%; -} -body { - font: - 14px/1.286 "Lucida Grande", - "Lucida Sans Unicode", - "DejaVu Sans", - Lucida, - Arial, - Helvetica, - sans-serif; - color: rgb(51, 51, 51); - height: 100%; - overflow: hidden; -} -#img2 { - width: 100%; - height: auto; - -moz-filter: saturate(200%); - -webkit-filter: saturate(200%); - -ms-filter: saturate(200%); - filter: saturate(200%); -} -table.standard-table { - border: 1px solid rgb(187, 187, 187); - border-collapse: collapse; - border-spacing: 0px; - margin: 0px 0px 1.286em; - width: 85%; - height: 100%; -} -table.standard-table th { - border: 1px solid rgb(187, 187, 187); - padding: 0px 5px; - background: none repeat scroll 0% 0% rgb(238, 238, 238); - text-align: left; - font-weight: bold; -} -table.standard-table td { - padding: 5px; - border: 1px solid rgb(204, 204, 204); - text-align: left; - vertical-align: top; - width: 25%; - height: auto; -} -#img3 { - height: 100%; -} -``` - -{{EmbedLiveSample('','100%','332px','','', 'no-codepen')}} - -> **Note :** Voir [`saturate()`]() pour plus d'informations. - -### `sepia()` - -La fonction [`sepia()`]() convertit l'image d'entrée est convertie en sépia. La valeur de l'argument définit la proportion de la conversion. Ainsi, si on utilise un argument égal à 100%, le résultat sera entièrement sépia et si on utilise une valeur de `0%`, l'image d'entrée sera inchangée. Les valeurs comprises entre `0%` et `100%` appliquent l'effet de façon linéaire. La valeur par défaut de l'argument est `0`. - -```css -filter: sepia(100%); -``` - -```html hidden - - - - - - - - - - - - - - - - - -
Image originaleExemple liveÉquivalent SVGExemple statique
- - - - -
-``` - -```css hidden -html { - height: 100%; -} -body { - font: - 14px/1.286 "Lucida Grande", - "Lucida Sans Unicode", - "DejaVu Sans", - Lucida, - Arial, - Helvetica, - sans-serif; - color: rgb(51, 51, 51); - height: 100%; - overflow: hidden; -} -#img2 { - width: 100%; - height: auto; - -moz-filter: sepia(100%); - -webkit-filter: sepia(100%); - -ms-filter: sepia(100%); - filter: sepia(100%); -} -table.standard-table { - border: 1px solid rgb(187, 187, 187); - border-collapse: collapse; - border-spacing: 0px; - margin: 0px 0px 1.286em; - width: 85%; - height: 100%; -} -table.standard-table th { - border: 1px solid rgb(187, 187, 187); - padding: 0px 5px; - background: none repeat scroll 0% 0% rgb(238, 238, 238); - text-align: left; - font-weight: bold; -} -table.standard-table td { - padding: 5px; - border: 1px solid rgb(204, 204, 204); - text-align: left; - vertical-align: top; - width: 25%; - height: auto; -} -#img3 { - height: 100%; -} -``` - -{{EmbedLiveSample('','100%','229px','','', 'no-codepen')}} - -> **Note :** Voir [`sepia()`]() pour plus d'informations. - -## Enchaîner les fonctions - -On peut appliquer autant de fonction que nécessaire pour manipuler le rendu obtenu. Dans l'exemple suivant, on augmente le contraste et la luminosité de l'image : +On peut combiner autant de fonctions que nécessaire pour manipuler le rendu. Les filtres sont alors appliqués dans l'ordre de leur déclaration. Dans l'exemple suivant, on améliore le contraste et la luminosité de l'image : ```css filter: contrast(175%) brightness(103%); ``` -```html hidden - - - - - - - - - - - - - - - -
Image originale - Exemple live - Exemple statique
- - - - - -
-``` +### Interpolation -```css hidden -html { - height: 100%; -} -body { - font: - 14px/1.286 "Lucida Grande", - "Lucida Sans Unicode", - "DejaVu Sans", - Lucida, - Arial, - Helvetica, - sans-serif; - color: rgb(51, 51, 51); - height: 100%; - overflow: hidden; -} -#img2 { - width: 100%; - height: auto; - -moz-filter: contrast(175%) brightness(103%); - -webkit-filter: contrast(175%) brightness(103%); - -ms-filter: contrast(175%) brightness(103%); - filter: contrast(175%) brightness(103%); -} -table.standard-table { - border: 1px solid rgb(187, 187, 187); - border-collapse: collapse; - border-spacing: 0px; - margin: 0px 0px 1.286em; - width: 85%; - height: 100%; -} -table.standard-table th { - border: 1px solid rgb(187, 187, 187); - padding: 0px 5px; - background: none repeat scroll 0% 0% rgb(238, 238, 238); - text-align: left; - font-weight: bold; -} -table.standard-table td { - padding: 5px; - border: 1px solid rgb(204, 204, 204); - text-align: left; - vertical-align: top; - width: 25%; - height: auto; -} -#img3 { - height: 100%; -} -``` +Pour les animations, si les filtres du début et de la fin ont une liste de fonctions de la même taille, sans [`url()`](/fr/docs/Web/CSS/url) et dans le même ordre, chaque filtre est interpolé selon ses règles particulières. -{{EmbedLiveSample('','100%','209px','','', 'no-codepen')}} +Si les listes de filtres sont de longueurs différentes, la liste la plus courte est complétée à la fin par les filtres supplémentaires de la liste la plus longue. Les fonctions ajoutées utilisent leur valeur initiale (qui ne modifie pas l'image). Tous les filtres alors présents sont interpolés selon leurs règles particulières. Sinon, c'est une interpolation discrète qui est utilisée. ## Définition formelle @@ -1267,34 +170,60 @@ table.standard-table td { ### Appliquer des fonctions de filtre -Voici un exemple d'utilisation des fonctions prédéfinies abordées ci-avant. Voyez les exemples précédents pour chaque fonction séparément. +On applique la propriété `filter` sur la deuxième image, en appliquant des niveaux de gris et un flou (à l'image et à la bordure). ```css -.mondiv { - filter: grayscale(50%); -} - -/* Appliquer un niveau de gris à 50% et un flou de rayon 10px */ -/* pour toutes les images */ img { - filter: grayscale(0.5) blur(10px); + border: 5px solid yellow; +} +/* On passe à 40% de niveau de gris */ +/* et un flou de 5px de rayon */ +img:nth-of-type(2) { + filter: grayscale(0.4) blur(5px); } ``` -### Appliquer des filtres SVG +```html +L'image originale est nette +L'image et la bordure sont floues et atténuées +``` + +{{EmbedLiveSample('','100%','229px')}} + +### Répéter des filtres -Voici des exemples où on utilise la fonction `url()` pour tirer parti de ressources SVG existantes : +Les fonctions de filtre sont appliquées selon leur ordre d'apparition. On peut donc appliquer plusieurs fois un même filtre. ```css -.target { - filter: url(#c1); +#MDN-logo { + border: 1px solid blue; + filter: drop-shadow(5px 5px 0 red) hue-rotate(180deg) drop-shadow(5px 5px 0 + red); } +``` -.mydiv { - filter: url(commonfilters.xml#large-blur); -} +```html hidden + ``` +{{EmbedLiveSample('','100%','229px')}} + +Les filtres sont appliqués dans l'ordre, c'est pour cela que les ombres portées ne sont pas de la même couleur. La teinte de la première ombre portée est modifiée par la fonction `hue-rotate()`, mais pas la teinte de la deuxième. + ## Spécifications {{Specifications}} @@ -1305,8 +234,8 @@ Voici des exemples où on utilise la fonction `url()` pour tirer parti de ressou ## Voir aussi -- [Appliquer des effets SVG sur du contenu HTML](/fr/docs/Applying_SVG_effects_to_HTML_content) -- La propriété [`mask`](/fr/docs/Web/CSS/mask) -- [SVG](/fr/docs/Web/SVG) -- [Un article de HTML5 Rocks : Understanding CSS filters (en anglais)](https://www.html5rocks.com/en/tutorials/filters/understanding-css/) -- [Générateur de filtres CSS](https://cssgenerator.org/filter-css-generator.html) +- La propriété CSS [`backdrop-filter`](/fr/docs/Web/CSS/backdrop-filter) +- [La composition et les modes de fusion en CSS](/fr/docs/Web/CSS/CSS_compositing_and_blending) avec les propriétés CSS [`background-blend-mode`](/fr/docs/Web/CSS/background-blend-mode) et [`mix-blend-mode`](/fr/docs/Web/CSS/mix-blend-mode) +- La propriété CSS [`mask`](/fr/docs/Web/CSS/mask) +- [SVG](/fr/docs/Web/SVG) et notamment l'élément [``](/fr/docs/Web/SVG/Element/filter) et l'attribut [`filter`](/fr/docs/Web/SVG/Attribute/filter) +- [Appliquer des effets SVG à du contenu HTML](/fr/docs/Web/SVG/Applying_SVG_effects_to_HTML_content)