diff options
| author | SphinxKnight <SphinxKnight@users.noreply.github.com> | 2021-12-19 07:01:50 +0100 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2021-12-19 07:01:50 +0100 |
| commit | 9efbf5afbf1239289f43a9939f07005aff58ea6d (patch) | |
| tree | ed494d81d69daaaf43393f44d33f561579a92d68 /files | |
| parent | a3efc50f26d87c20c2f07f14772cf0d57d0f4fc3 (diff) | |
| download | translated-content-9efbf5afbf1239289f43a9939f07005aff58ea6d.tar.gz translated-content-9efbf5afbf1239289f43a9939f07005aff58ea6d.tar.bz2 translated-content-9efbf5afbf1239289f43a9939f07005aff58ea6d.zip | |
Fixes #3154 - Update filter-function section (#3158)
* Fixes #3154 by updating drop-shadow and the whole filter-function section
* fix link flaw
Diffstat (limited to 'files')
| -rw-r--r-- | files/fr/web/css/filter-function/blur()/index.md | 35 | ||||
| -rw-r--r-- | files/fr/web/css/filter-function/brightness()/index.md | 37 | ||||
| -rw-r--r-- | files/fr/web/css/filter-function/contrast()/index.md | 44 | ||||
| -rw-r--r-- | files/fr/web/css/filter-function/drop-shadow()/index.md | 70 | ||||
| -rw-r--r-- | files/fr/web/css/filter-function/grayscale()/index.md | 35 | ||||
| -rw-r--r-- | files/fr/web/css/filter-function/hue-rotate()/index.md | 37 | ||||
| -rw-r--r-- | files/fr/web/css/filter-function/index.md | 188 | ||||
| -rw-r--r-- | files/fr/web/css/filter-function/invert()/index.md | 36 | ||||
| -rw-r--r-- | files/fr/web/css/filter-function/opacity()/index.md | 41 | ||||
| -rw-r--r-- | files/fr/web/css/filter-function/saturate()/index.md | 35 | ||||
| -rw-r--r-- | files/fr/web/css/filter-function/sepia()/index.md | 36 |
11 files changed, 454 insertions, 140 deletions
diff --git a/files/fr/web/css/filter-function/blur()/index.md b/files/fr/web/css/filter-function/blur()/index.md index f84ab4ee0c..0297437fea 100644 --- a/files/fr/web/css/filter-function/blur()/index.md +++ b/files/fr/web/css/filter-function/blur()/index.md @@ -1,36 +1,53 @@ --- title: blur() slug: Web/CSS/filter-function/blur() -tags: - - CSS - - Filtre - - Fonction - - Reference translation_of: Web/CSS/filter-function/blur() +browser-compat: css.types.filter-function.blur --- {{CSSRef}} -La fonction CSS **`blur()`** permet d'appliquer [une flou gaussien](https://en.wikipedia.org/wiki/Gaussian_blur) sur l'image d'entrée. Le résultat de cette fonction est une valeur {{cssxref("<filter-function>")}}. +La fonction CSS **`blur()`** permet d'appliquer [un flou gaussien](https://en.wikipedia.org/wiki/Gaussian_blur) sur l'image d'entrée. Le résultat de cette fonction est une valeur [`<filter-function>`](/fr/docs/Web/CSS/filter-function). {{EmbedInteractiveExample("pages/css/function-blur.html")}} ## Syntaxe - blur(rayon) +```css +blur(rayon) +``` ### Paramètres - `rayon` - - : Le rayon d'application du flou, défini par une longueur CSS ({{cssxref("<length>")}}). Cela définit l'écart-type de la fonction gaussienne appliquée (c'est-à-dire le nombre de pixels qui se mélangeront). Ainsi, plus la valeur est grande, plus le flou sera prononcé. Si on utilise la longueur nulle `0`, l'image ne sera pas modifiée. La valeur utilisée par défaut lors d'une interpolation est `0`. + - : Le rayon d'application du flou, défini par une longueur CSS ([`<length>`](/fr/docs/Web/CSS/length)). Cela définit l'écart-type de la fonction gaussienne appliquée (c'est-à-dire le nombre de pixels qui se mélangeront). Ainsi, plus la valeur est grande, plus le flou sera prononcé. Si on utilise la longueur nulle `0`, l'image ne sera pas modifiée. La valeur utilisée par défaut lors d'une interpolation est `0`. ## Exemples +### Définir un flou en pixels ou en rem + ```css blur(0); /* Aucun effet */ blur(8px); /* Un flou avec un rayon de 8px */ blur(1.17rem); /* Un flou avec un rayon de 1.17rem */ ``` +## Spécifications + +{{Specifications}} + +## Compatibilité des navigateurs + +{{Compat}} + ## Voir aussi -- {{cssxref("<filter-function>")}} +- [`<filter-function>`](/fr/docs/Web/CSS/filter-function) et les autres fonctions associées + - [`brightness()`](/fr/docs/Web/CSS/filter-function/brightness()) + - [`contrast()`](/fr/docs/Web/CSS/filter-function/contrast()) + - [`drop-shadow()`](/fr/docs/Web/CSS/filter-function/drop-shadow()) + - [`grayscale()`](/fr/docs/Web/CSS/filter-function/grayscale()) + - [`hue-rotate()`](/fr/docs/Web/CSS/filter-function/hue-rotate()) + - [`invert()`](/fr/docs/Web/CSS/filter-function/invert()) + - [`opacity()`](/fr/docs/Web/CSS/filter-function/opacity()) + - [`saturate()`](/fr/docs/Web/CSS/filter-function/saturate()) + - [`sepia()`](/fr/docs/Web/CSS/filter-function/sepia())
\ No newline at end of file diff --git a/files/fr/web/css/filter-function/brightness()/index.md b/files/fr/web/css/filter-function/brightness()/index.md index 340e04ede2..88d21e40f2 100644 --- a/files/fr/web/css/filter-function/brightness()/index.md +++ b/files/fr/web/css/filter-function/brightness()/index.md @@ -1,30 +1,30 @@ --- title: brightness() slug: Web/CSS/filter-function/brightness() -tags: - - CSS - - Filtre - - Fonction - - Reference translation_of: Web/CSS/filter-function/brightness() +browser-compat: css.types.filter-function.brightness --- -{{cssref}} +{{CSSRef}} -La fonction CSS **`brightness()`** applique un multiplicateur linéaire sur une image afin de la rendre plus claire ou plus sombre. Le résultat obtenu est une valeur de type {{cssxref("<filter-function>")}}. +La fonction CSS **`brightness()`** applique un multiplicateur linéaire sur une image afin de la rendre plus claire ou plus sombre. Le résultat obtenu est une valeur de type [`<filter-function>`](/fr/docs/Web/CSS/filter-function). {{EmbedInteractiveExample("pages/css/function-brightness.html")}} ## Syntaxe - brightness(multiplicateur) +```css +brightness(multiplicateur) +``` ### Paramètres - `multiplicateur` - - : L'amplification de la clarté de l'image, indiquée sous la forme d'un nombre ({{cssxref("<number>")}}) ou d'un pourcentage ({{cssxref("<percentage>")}}). Une valeur inférieure à `100%` assombrira l'image alors qu'une valeur supérieure à `100%` la rendra plus claire. Une valeur de `0%` permettra d'obtenir une image complètement noire et une valeur de `100%` laissera l'image inchangée. La valeur par défaut utilisée lors de l'interpolation est `1`. + - : L'amplification de la clarté de l'image, indiquée sous la forme d'un nombre ([`<number>`](/fr/docs/Web/CSS/number)) ou d'un pourcentage ([`<percentage>`](/fr/docs/Web/CSS/percentage)). Une valeur inférieure à `100%` assombrira l'image alors qu'une valeur supérieure à `100%` la rendra plus claire. Une valeur de `0%` permettra d'obtenir une image complètement noire et une valeur de `100%` laissera l'image inchangée. La valeur par défaut utilisée lors de l'interpolation est `1`. ## Exemples +### Définir la clarté avec des nombres et des pourcentages + ```css brightness(0%) /* Complètement noir */ brightness(0.4) /* 40% de la clarté */ @@ -32,6 +32,23 @@ brightness(1) /* Aucun effet */ brightness(200%) /* Double la clarté */ ``` +## Spécifications + +{{Specifications}} + +## Compatibilité des navigateurs + +{{Compat}} + ## Voir aussi -- {{cssxref("<filter-function>")}} +- [`<filter-function>`](/fr/docs/Web/CSS/filter-function) et les autres fonctions associées + - [`blur()`](/fr/docs/Web/CSS/filter-function/blur()) + - [`contrast()`](/fr/docs/Web/CSS/filter-function/contrast()) + - [`drop-shadow()`](/fr/docs/Web/CSS/filter-function/drop-shadow()) + - [`grayscale()`](/fr/docs/Web/CSS/filter-function/grayscale()) + - [`hue-rotate()`](/fr/docs/Web/CSS/filter-function/hue-rotate()) + - [`invert()`](/fr/docs/Web/CSS/filter-function/invert()) + - [`opacity()`](/fr/docs/Web/CSS/filter-function/opacity()) + - [`saturate()`](/fr/docs/Web/CSS/filter-function/saturate()) + - [`sepia()`](/fr/docs/Web/CSS/filter-function/sepia())
\ No newline at end of file diff --git a/files/fr/web/css/filter-function/contrast()/index.md b/files/fr/web/css/filter-function/contrast()/index.md index 820534ce48..a7ed526629 100644 --- a/files/fr/web/css/filter-function/contrast()/index.md +++ b/files/fr/web/css/filter-function/contrast()/index.md @@ -1,37 +1,53 @@ --- title: contrast() slug: Web/CSS/filter-function/contrast() -tags: - - CSS - - Filtre - - Fonction - - Reference translation_of: Web/CSS/filter-function/contrast() +browser-compat: css.types.filter-function.contrast --- {{CSSRef}} -La fonction CSS **`contrast()`** permet d'ajuster le contraste d'une image. Le résultat de cette fonction est une valeur de type {{cssxref("<filter-function>")}}. +La fonction CSS **`contrast()`** permet d'ajuster le contraste d'une image. Le résultat de cette fonction est une valeur de type [`<filter-function>](/fr/docs/Web/CSS/filter-function). {{EmbedInteractiveExample("pages/css/function-contrast.html")}} ## Syntaxe - contrast(multiplicateur) - +```css +contrast(multiplicateur) +``` ### Paramètres - `multiplicateur` - - : La modification de contraste à appliquer à l'image, exprimée sous la forme d'un nombre ({{cssxref("<number>")}}) ou d'un pourcentage ({{cssxref("<percentage>")}}). Une valeur inférieure à `100%` réduira le contraste et une valeur supérieure à `100%` accentuera le contraste. Une valeur de `0%` permettra d'obtenir une image complètement grise et une valeur de `100%` laissera l'image inchangée. La valeur par défaut utilisée pour les interpolations est `1`. + - : La modification de contraste à appliquer à l'image, exprimée sous la forme d'un nombre ([`<number>`](/fr/docs/Web/CSS/number)) ou d'un pourcentage ([`<percentage>`](/fr/docs/Web/CSS/percentage)). Une valeur inférieure à `100%` réduira le contraste et une valeur supérieure à `100%` accentuera le contraste. Une valeur de `0%` permettra d'obtenir une image complètement grise et une valeur de `100%` laissera l'image inchangée. La valeur par défaut utilisée pour les interpolations est `1`. ## Exemples +### Définir un contraste à l'aide de nombres et de pourcentages + ```css -contrast(0); /* Completely gray */ -contrast(65%); /* 65% contrast */ -contrast(1); /* No effect */ -contrast(200%); /* Double contrast */ +contrast(0); /* Complètement gris */ +contrast(65%); /* 65% de contraste */ +contrast(1); /* Aucun effet */ +contrast(200%); /* Contraste doublé */ ``` +## Spécifications + +{{Specifications}} + +## Compatibilité des navigateurs + +{{Compat}} + ## Voir aussi -- {{cssxref("<filter-function>")}} +- [`<filter-function>`](/fr/docs/Web/CSS/filter-function) et les autres fonctions associées + - [`blur()`](/fr/docs/Web/CSS/filter-function/blur()) + - [`brightness()`](/fr/docs/Web/CSS/filter-function/brightness()) + - [`drop-shadow()`](/fr/docs/Web/CSS/filter-function/drop-shadow()) + - [`grayscale()`](/fr/docs/Web/CSS/filter-function/grayscale()) + - [`hue-rotate()`](/fr/docs/Web/CSS/filter-function/hue-rotate()) + - [`invert()`](/fr/docs/Web/CSS/filter-function/invert()) + - [`opacity()`](/fr/docs/Web/CSS/filter-function/opacity()) + - [`saturate()`](/fr/docs/Web/CSS/filter-function/saturate()) + - [`sepia()`](/fr/docs/Web/CSS/filter-function/sepia())
\ No newline at end of file diff --git a/files/fr/web/css/filter-function/drop-shadow()/index.md b/files/fr/web/css/filter-function/drop-shadow()/index.md index 4e50f4fc99..af57af798d 100644 --- a/files/fr/web/css/filter-function/drop-shadow()/index.md +++ b/files/fr/web/css/filter-function/drop-shadow()/index.md @@ -1,57 +1,69 @@ --- title: drop-shadow() slug: Web/CSS/filter-function/drop-shadow() -tags: - - CSS - - Fonction - - Reference - - Type translation_of: Web/CSS/filter-function/drop-shadow() +browser-compat: css.types.filter-function.drop-shadow --- {{CSSRef}} -La fonction CSS **`drop-shadow()`** permet d'appliquer une ombre portée sur une image. Le résultat obtenu par cette fonction est une valeur {{cssxref("<filter-function>")}}. +La fonction CSS **`drop-shadow()`** permet d'appliquer une ombre portée sur une image. Le résultat obtenu par cette fonction est une valeur [`<filter-function>`](/fr/docs/Web/CSS/filter-function). {{EmbedInteractiveExample("pages/css/function-drop-shadow.html")}} -En pratique, une ombre portée correspond à une version floutée et décalée du masque alpha de l'image, dessiné dans une couleur donnée et fusionné sous l'image. +En pratique, une ombre portée correspond à une version floutée et décalée du masque alpha de l'image, dessiné avec une couleur donnée et fusionné sous l'image. -> **Note :** Cette fonction s'apparente à la propriété {{cssxref("box-shadow")}}. La propriété `box-shadow` permet de créer une ombre rectangulaire sous **la boîte entière** d'un élément. En revanche, la fonction `drop-shadow()` permet de créer un ombre qui épouse la forme (le canal alpha) de **l'image même**. +> **Note :** Cette fonction s'apparente à la propriété [`box-shadow`](/fr/docs/Web/CSS/box-shadow). La propriété `box-shadow` permet de créer une ombre rectangulaire sous **la boîte entière** d'un élément. En revanche, la fonction `drop-shadow()` permet de créer un ombre qui épouse la forme (le canal alpha) de **l'image même**. ## Syntaxe - drop-shadow(décalage-x, décalage-y, rayon-flou, rayon-étalement, couleur) +```css +drop-shadow(decalage-x decalage-y rayon-flou couleur) +``` -La fonction `drop-shadow()` accepte un paramètre de type `<shadow>` (défini avec la propriété {{cssxref("box-shadow")}}), mais où le mot-clé `inset` n'est pas autorisé. +La fonction `drop-shadow()` accepte un paramètre de type `<shadow>` (tel que défini dans la documentation de [`box-shadow`](/fr/docs/Web/CSS/box-shadow)), mais pour lequel le mot-clé `inset` et le paramètre `spread` ne sont pas acceptés. ### Paramètres -- `décalage-x` `décalage-y` - - : Deux longueurs ({{cssxref("<length>")}}) qui déterminent le décalage de l'ombre sous l'image. `décalage-x` indique la distance horizontale (les valeurs négatives décalent l'ombre vers la gauche et les valeurs positives la décalent vers la droite). `décalage-y` indique la distance verticale (les valeurs négatives décalent l'ombre vers le haut et les valeurs positives vers le bas). Si les deux valeurs sont égales à `0`, l'ombre est directement placée sous l'image. -- `rayon-flou` {{optional_inline}} - - : Une longueur ({{cssxref("<length>")}}) qui représente le rayon du flou. Plus la valeur est élevée, plus l'ombre sera grande et floue. La valeur par défaut est `0` ce qui correspond à un contour net, sans flou. Il n'est pas possible d'utiliser des valeurs négatives -- `rayon-étalement`{{optional_inline}} - - - : Le rayon d'étalement de l'ombre, défini sous la forme d'une longueur ({{cssxref("<length>")}}). Les valeurs positives permettent d'avoir une ombre plus grande et plus étendue et les valeurs négatives permettent de réduire la zone d'ombre. La valeur par défaut est `0` : l'ombre a alors la même taille que l'image. - - > **Attention :** Chrome et Safari (basés sur WebKit) ne prennent pas en charge ce paramètre. S'il est utilisé, l'effet ne sera pas applique du tout. - -- `couleur`{{optional_inline}} - - : La couleur de l'ombre, indiquée sous la forme d'une valeur {{cssxref("<color>")}}. La valeur par défaut dépend du navigateur. Pour Firefox et Internet Explorer, c'est la valeur de la propriété {{cssxref("color")}} qui sera utilisée alors que les navigateurs basés sur WebKit utiliseront une ombre transparente par défaut. +- `decalage-x` `decalage-y` (required) + - : Deux valeurs de longueur ( type [`<length>`](/fr/docs/Web/CSS/length)) qui déterminent le décalage de l'ombre. `decalage-x` indique la distance horizontale, les valeurs négatives décalant l'ombre vers la gauche de l'élément. `decalage-y` indique la distance verticale, les valeurs négatives décalant l'ombre vers le haut de l'élément. Si les deux valeurs sont `0`, l'ombre est placée directement sous l'élément. +- `rayon-flou` (optional) + - : Le rayon de flou de l'ombre, indiqué comme une longueur (type [`<length>`](/fr/docs/Web/CSS/length)). Plus la valeur est grande, plus l'ombre sera grande et floue. Si cette valeur n'est pas fournie, elle prendra 0 comme valeur par défaut, ce qui créera une ombre au contour net. Les valeurs négatives ne sont pas autorisées. +- `couleur` (optional) + - : La couleur de l'ombre, indiquée sous la forme d'une valeur de type [`<color>`](/fr/docs/Web/CSS/color_value). Si cette valeur n'est pas fournie, c'est la couleur indiquée par la propriété [`color`](/fr/docs/Web/CSS/color) qui est utilisée. ## Exemples +### Définir une ombre portée avec des décalages et un rayon de flou exprimés en pixels + ```css -/* Une ombre noire avec un flou de 10px de rayon. */ +/* Une ombre noire avec un rayon de flou de 10px */ drop-shadow(16px 16px 10px black) +``` + +### Définir une ombre portée avec des décalages et un rayon de flou en rem -/* Une ombre rouge avec un flou de 1rem de rayon et de .3rem d'étalement */ -/* Attention, à l'heure actuelle, ce type d'ombre n'est pas pris en charge */ -/* par l'ensemble des navigateurs */ -drop-shadow(.5rem .5rem 1rem .3rem #e23) +```css +/* Une ombre rougeâtre avec un rayon de flou de 1rem */ +drop-shadow(.5rem .5rem 1rem #e23) ``` +## Spécifications + +{{Specifications}} + +## Compatibilité des navigateurs + +{{Compat}} ## Voir aussi -- {{cssxref("<filter-function>")}} -- La propriété CSS {{cssxref("box-shadow")}} +- [`<filter-function>`](/fr/docs/Web/CSS/filter-function) et les autres fonctions associées + - [`blur()`](/fr/docs/Web/CSS/filter-function/blur()) + - [`brightness()`](/fr/docs/Web/CSS/filter-function/brightness()) + - [`contrast()`](/fr/docs/Web/CSS/filter-function/contrast()) + - [`grayscale()`](/fr/docs/Web/CSS/filter-function/grayscale()) + - [`hue-rotate()`](/fr/docs/Web/CSS/filter-function/hue-rotate()) + - [`invert()`](/fr/docs/Web/CSS/filter-function/invert()) + - [`opacity()`](/fr/docs/Web/CSS/filter-function/opacity()) + - [`saturate()`](/fr/docs/Web/CSS/filter-function/saturate()) + - [`sepia()`](/fr/docs/Web/CSS/filter-function/sepia()) +- La propriété CSS [`box-shadow`](/fr/docs/Web/CSS/box-shadow)
\ No newline at end of file diff --git a/files/fr/web/css/filter-function/grayscale()/index.md b/files/fr/web/css/filter-function/grayscale()/index.md index 37bdd67c93..88329e7917 100644 --- a/files/fr/web/css/filter-function/grayscale()/index.md +++ b/files/fr/web/css/filter-function/grayscale()/index.md @@ -1,36 +1,53 @@ --- title: grayscale() slug: Web/CSS/filter-function/grayscale() -tags: - - CSS - - Filtre - - Fonction - - Reference translation_of: Web/CSS/filter-function/grayscale() +browser-compat: css.types.filter-function.grayscale --- {{CSSRef}} -La fonction CSS **`grayscale()`** convertit une image en niveaux de gris. Le résultat de cette fonction est une valeur {{cssxref("<filter-function>")}}. +La fonction CSS **`grayscale()`** convertit une image en niveaux de gris. Le résultat de cette fonction est une valeur [`<filter-function>`](/fr/docs/Web/CSS/filter-function). {{EmbedInteractiveExample("pages/css/function-grayscale.html")}} ## Syntaxe - grayscale(multiplicateur) +```css +grayscale(multiplicateur) +``` ### Paramètres - `multiplicateur` - - : L'intensité de la conversion, indiquée sous la forme d'un nombre ({{cssxref("<number>")}}) ou d'un pourcentage ({{cssxref("<percentage>")}}). Avec une valeur égale à `100%`, l'image obtenue sera complètement en niveaux de gris. Avec une valeur égale à `0%`, l'image source restera inchangée. Les valeurs comprises entre `0%` et `100%` auront un effet intermédiaire (progression linéaire). Dans le cas d'une interpolation, la valeur par défaut utilisée est `0`. + - : L'intensité de la conversion, indiquée sous la forme d'un nombre ([`<number>`](/fr/docs/Web/CSS/number)) ou d'un pourcentage ([`<percentage>`](/fr/docs/Web/CSS/percentage)). Avec une valeur égale à `100%`, l'image obtenue sera complètement en niveaux de gris. Avec une valeur égale à `0%`, l'image source restera inchangée. Les valeurs comprises entre `0%` et `100%` auront un effet intermédiaire (progression linéaire). Dans le cas d'une interpolation, la valeur par défaut utilisée est `0`. ## Exemples +### Exemples de valeurs correctes pour grayscale() + ```css grayscale(0) /* Aucun effet */ grayscale(.7) /* Converti à 70% en niveaux de gris */ grayscale(100%) /* Uniquement en niveaux de gris */ ``` +## Spécifications + +{{Specifications}} + +## Compatibilité des navigateurs + +{{Compat}} + ## Voir aussi -- {{cssxref("<filter-function>")}} +- [`<filter-function>`](/fr/docs/Web/CSS/filter-function) et les autres fonctions associées + - [`blur()`](/fr/docs/Web/CSS/filter-function/blur()) + - [`brightness()`](/fr/docs/Web/CSS/filter-function/brightness()) + - [`contrast()`](/fr/docs/Web/CSS/filter-function/contrast()) + - [`drop-shadow()`](/fr/docs/Web/CSS/filter-function/drop-shadow()) + - [`hue-rotate()`](/fr/docs/Web/CSS/filter-function/hue-rotate()) + - [`invert()`](/fr/docs/Web/CSS/filter-function/invert()) + - [`opacity()`](/fr/docs/Web/CSS/filter-function/opacity()) + - [`saturate()`](/fr/docs/Web/CSS/filter-function/saturate()) + - [`sepia()`](/fr/docs/Web/CSS/filter-function/sepia())
\ No newline at end of file diff --git a/files/fr/web/css/filter-function/hue-rotate()/index.md b/files/fr/web/css/filter-function/hue-rotate()/index.md index c212084dd4..5a0095dafa 100644 --- a/files/fr/web/css/filter-function/hue-rotate()/index.md +++ b/files/fr/web/css/filter-function/hue-rotate()/index.md @@ -1,30 +1,30 @@ --- title: hue-rotate() slug: Web/CSS/filter-function/hue-rotate() -tags: - - CSS - - Filtre - - Fonction - - Reference translation_of: Web/CSS/filter-function/hue-rotate() +browser-compat: css.types.filter-function.hue-rotate --- {{CSSRef}} -La fonction CSS **`hue-rotate()`** permet d'appliquer une rotation de teinte sur une image. Le résultat de cette fonction est une valeur {{cssxref("<filter-function>")}}. +La fonction CSS **`hue-rotate()`** permet d'appliquer une rotation de teinte sur une image. Le résultat de cette fonction est une valeur [`<filter-function>`](/fr/docs/Web/CSS/filter-function). -{ {EmbedInteractiveExample("pages/css/function-hue-rotate.html")}} +{{EmbedInteractiveExample("pages/css/function-hue-rotate.html")}} ## Syntaxe - hue-rotate(angle) +```css +hue-rotate(angle) +``` ### Paramètres - `angle` - - : L'angle de rotation sur le cercle des couleurs, exprimé avec une valeur de type {{cssxref("<angle>")}}. Une valeur de `0deg` laissera l'image inchangée. La valeur utilisée par défaut pour une interpolation sera `0`. Bien qu'il n'y ait pas de valeur maximale, la valeur de l'angle est toujours ramenée entre `360deg` et `0deg`. + - : L'angle de rotation sur le cercle des couleurs, exprimé avec une valeur de type [`<angle>`](/fr/docs/Web/CSS/angle). Une valeur de `0deg` laissera l'image inchangée. La valeur utilisée par défaut pour une interpolation sera `0`. Bien qu'il n'y ait pas de valeur maximale, la valeur de l'angle est toujours ramenée entre `360deg` et `0deg`. ## Exemples +### Exemples de valeurs correctes pour hue-rotate() + ```css hue-rotate(-90deg); /* Correspond à une rotation de 270deg */ hue-rotate(0deg); /* Sans effet */ @@ -33,6 +33,23 @@ hue-rotate(.5turn); /* Rotation de 180deg */ hue-rotate(405deg); /* Correspond à une rotation de 45deg */ ``` +## Spécifications + +{{Specifications}} + +## Compatibilité des navigateurs + +{{Compat}} + ## Voir aussi -- {{cssxref("<filter-function>")}} +- [`<filter-function>`](/fr/docs/Web/CSS/filter-function) et les autres fonctions associées + - [`blur()`](/fr/docs/Web/CSS/filter-function/blur()) + - [`brightness()`](/fr/docs/Web/CSS/filter-function/brightness()) + - [`contrast()`](/fr/docs/Web/CSS/filter-function/contrast()) + - [`drop-shadow()`](/fr/docs/Web/CSS/filter-function/drop-shadow()) + - [`grayscale()`](/fr/docs/Web/CSS/filter-function/grayscale()) + - [`invert()`](/fr/docs/Web/CSS/filter-function/invert()) + - [`opacity()`](/fr/docs/Web/CSS/filter-function/opacity()) + - [`saturate()`](/fr/docs/Web/CSS/filter-function/saturate()) + - [`sepia()`](/fr/docs/Web/CSS/filter-function/sepia())
\ No newline at end of file diff --git a/files/fr/web/css/filter-function/index.md b/files/fr/web/css/filter-function/index.md index 83e3e6df0e..2048c553fc 100644 --- a/files/fr/web/css/filter-function/index.md +++ b/files/fr/web/css/filter-function/index.md @@ -9,42 +9,194 @@ translation_of: Web/CSS/filter-function --- {{CSSRef}} -Le type de donnée **`<filter-function>`** représente un effet graphique qui peut modifier l'apparence d'une image. Il est notamment utilisé avec les propriétés {{cssxref("filter")}} et {{cssxref("backdrop-filter")}}. +Le type de donnée **`<filter-function>`** représente un effet graphique qui peut modifier l'apparence d'une image. Il est notamment utilisé avec les propriétés [`filter`](/fr/docs/Web/CSS/filter) et [`backdrop-filter`](/fr/docs/Web/CSS/backdrop-filter). ## Syntaxe Une valeur de type `<filter-function>` se construit avec l'une des fonctions listées ci-après. Chaque fonction utilise un argument et si celui-ci est invalide, aucun filtre n'est appliqué. -- {{cssxref("filter-function/blur", "blur()")}} +- [`blur()`](/fr/docs/Web/CSS/filter-function/blur()) - : Ajoute un flou sur l'image. -- {{cssxref("filter-function/brightness", "brightness()")}} +- [`brightness()`](/fr/docs/Web/CSS/filter-function/brightness()) - : Rend l'image plus claire ou plus sombre. -- {{cssxref("filter-function/contrast", "contrast()")}} +- [`contrast()`](/fr/docs/Web/CSS/filter-function/contrast()) - : Augmente ou diminue le contraste de l'image. -- {{cssxref("filter-function/drop-shadow", "drop-shadow()")}} +- [`drop-shadow()`](/fr/docs/Web/CSS/filter-function/drop-shadow()) - : Applique une ombre portée derrière l'image. -- {{cssxref("filter-function/grayscale", "grayscale()")}} +- [`grayscale()`](/fr/docs/Web/CSS/filter-function/grayscale()) - : Convertit l'image en niveaux de gris. -- {{cssxref("filter-function/hue-rotate", "hue-rotate()")}} +- [`hue-rotate()`](/fr/docs/Web/CSS/filter-function/hue-rotate()) - : Modifie la teinte globale de l'image. -- {{cssxref("filter-function/invert", "invert()")}} +- [`invert()`](/fr/docs/Web/CSS/filter-function/invert()) - : Inverse les couleurs de l'image. -- {{cssxref("filter-function/opacity", "opacity()")}} +- [`opacity()`](/fr/docs/Web/CSS/filter-function/opacity()) - : Rend l'image transparente. -- {{cssxref("filter-function/saturate", "saturate()")}} +- [`saturate()`](/fr/docs/Web/CSS/filter-function/saturate()) - : Sursature ou désature l'image. -- {{cssxref("filter-function/sepia", "sepia()")}} +- [`sepia()`](/fr/docs/Web/CSS/filter-function/sepia()) - : Convertit l'image en sépia. +## Exemples + +### Comparaison des fonctions de filtre + +Cet exemple fournit une image ainsi qu'un menu pour expérimenter les différentes fonctions de filtres avec un curseur pour faire varier la valeur du paramètre. En jouant sur le curseur et la fonction utilisée, l'image est mise à jour en temps réel, vous permettant de voir l'effet des différents filtres. + +#### HTML + +```html +<div></div> +<ul> + <li> + <label for="filter-select">Choisissez une fonction de filtre :</label> + <select id="filter-select"> + <option selected>blur</option> + <option>brightness</option> + <option>contrast</option> + <option>drop-shadow</option> + <option>grayscale</option> + <option>hue-rotate</option> + <option>invert</option> + <option>opacity</option> + <option>saturate</option> + <option>sepia</option> + </select> + </li> + <li> + <input type="range"><output></output> + </li> + <li> + <p>Valeur CSS actuelle : <code></code></p> + </li> +</ul> +``` + +#### CSS + +```css +div { + width: 300px; + height: 300px; + background: url(https://media.prod.mdn.mozit.cloud/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png) no-repeat center; +} + +li { + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 20px; +} + +input { + width: 60% +} + +output { + width: 5%; + text-align: center; +} + +select { + width: 40%; + margin-left: 2px; +} +``` + +#### JavaScript + +```js +const selectElem = document.querySelector('select'); +const divElem = document.querySelector('div'); +const slider = document.querySelector('input'); +const output = document.querySelector('output'); +const curValue = document.querySelector('p code'); + +selectElem.addEventListener('change', () => { + setSlider(selectElem.value); + setDiv(selectElem.value); +}); + +slider.addEventListener('input', () => { + setDiv(selectElem.value); +}); + +function setSlider(filter) { + if(filter === 'blur') { + slider.value = 0; + slider.min = 0; + slider.max = 30; + slider.step = 1; + slider.setAttribute('data-unit', 'px'); + } else if(filter === 'brightness' || filter === 'contrast' || filter === 'saturate') { + slider.value = 1; + slider.min = 0; + slider.max = 4; + slider.step = 0.05; + slider.setAttribute('data-unit', ''); + } else if(filter === 'drop-shadow') { + slider.value = 0; + slider.min = -20; + slider.max = 40; + slider.step = 1; + slider.setAttribute('data-unit', 'px'); + } else if(filter === 'opacity') { + slider.value = 1; + slider.min = 0; + slider.max = 1; + slider.step = 0.01; + slider.setAttribute('data-unit', ''); + } else if(filter === 'grayscale' || filter === 'invert' || filter === 'sepia') { + slider.value = 0; + slider.min = 0; + slider.max = 1; + slider.step = 0.01; + slider.setAttribute('data-unit', ''); + } else if(filter === 'hue-rotate') { + slider.value = 0; + slider.min = 0; + slider.max = 360; + slider.step = 1; + slider.setAttribute('data-unit', 'deg'); + } +} + +function setDiv(filter) { + if(filter === 'drop-shadow') { + divElem.style.filter = `${selectElem.value}(${Math.round(slider.value)}${slider.getAttribute('data-unit')} ${Math.round(slider.value)}${slider.getAttribute('data-unit')} ${Math.round(Math.abs(slider.value/2))}${slider.getAttribute('data-unit')})`; + } else { + divElem.style.filter = `${selectElem.value}(${slider.value}${slider.getAttribute('data-unit')}`; + } + + updateOutput(); + updateCurValue(); +} + +function updateOutput() { + output.textContent = slider.value; +} + +function updateCurValue() { + curValue.textContent = `filter: ${divElem.style.filter}`; +} + +setSlider(selectElem.value); +setDiv(selectElem.value); +``` + +#### Résultat + +{{EmbedLiveSample('Comparaison_des_fonctions_de_filtre', '100%', 500)}} + ## Spécifications -| Spécification | État | Commentaires | -| ------------------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------- | -| {{SpecName('Filters 1.0', '#typedef-filter-function', '<filter-function>')}} | {{Spec2('Filters 1.0')}} | Définition initiale. | +{{Specifications}} -## Voir aussi +## Compatibilité des navigateurs + +{{Compat}} -- Les propriétés qui utilisent ce type de donnée : +## Voir aussi - - {{cssxref("filter")}} - - {{cssxref("backdrop-filter")}} +- Les propriétés qui utilisent ce type de donnée : + - [`filter`](/fr/docs/Web/CSS/filter) + - [`backdrop-filter`](/fr/docs/Web/CSS/backdrop-filter) diff --git a/files/fr/web/css/filter-function/invert()/index.md b/files/fr/web/css/filter-function/invert()/index.md index 507207a2d5..0c148b0517 100644 --- a/files/fr/web/css/filter-function/invert()/index.md +++ b/files/fr/web/css/filter-function/invert()/index.md @@ -1,36 +1,52 @@ --- title: invert() slug: Web/CSS/filter-function/invert() -tags: - - CSS - - Filtre - - Fonction - - Reference translation_of: Web/CSS/filter-function/invert() +browser-compat: css.types.filter-function.invert --- {{CSSRef}} -La fonction CSS **`invert()`** permet d'inverser les couleurs de l'image. La valeur obtenue par cette fonction est de type {{cssxref("<filter-function>")}}. +La fonction CSS **`invert()`** permet d'inverser les couleurs de l'image. La valeur obtenue par cette fonction est de type [`<filter-function>`](/fr/docs/Web/CSS/filter-function). {{EmbedInteractiveExample("pages/css/function-invert.html")}} ## Syntaxe - invert(multiplicateur) - +```css +invert(multiplicateur) +``` ### Paramètres - `multiplicateur` - - : L'intensité de la conversion, indiquée sous la forme d'un nombre ({{cssxref("<number>")}}) ou d'un pourcentage ({{cssxref("<percentage>")}}). Avec `100%`, les couleurs seront entièrement inversées (ce sera un négatif de l'image originale). Une valeur de `0%` ne modifiera pas l'image. Les valeurs intermédiaires auront un effet proportionnel. Lors d'une interpolation, la valeur utilisée par défaut est `0`. + - : L'intensité de la conversion, indiquée sous la forme d'un nombre ([`<number>`](/fr/docs/Web/CSS/number)) ou d'un pourcentage ([`<percentage>`](/fr/docs/Web/CSS/percentage)). Avec `100%`, les couleurs seront entièrement inversées (ce sera un négatif de l'image originale). Une valeur de `0%` ne modifiera pas l'image. Les valeurs intermédiaires auront un effet proportionnel. Lors d'une interpolation, la valeur utilisée par défaut est `0`. ## Exemples +### Exemples de valeurs correctes pour invert() + ```css invert(0); /* Aucun effet */ invert(.6); /* Inversion à 60% */ invert(100%); /* Négatif de l'image originale */ ``` +## Spécifications + +{{Specifications}} + +## Compatibilité des navigateurs + +{{Compat}} + ## Voir aussi -- {{cssxref("<filter-function>")}} +- [`<filter-function>`](/fr/docs/Web/CSS/filter-function) et les autres fonctions associées + - [`blur()`](/fr/docs/Web/CSS/filter-function/blur()) + - [`brightness()`](/fr/docs/Web/CSS/filter-function/brightness()) + - [`contrast()`](/fr/docs/Web/CSS/filter-function/contrast()) + - [`drop-shadow()`](/fr/docs/Web/CSS/filter-function/drop-shadow()) + - [`grayscale()`](/fr/docs/Web/CSS/filter-function/grayscale()) + - [`hue-rotate()`](/fr/docs/Web/CSS/filter-function/hue-rotate()) + - [`opacity()`](/fr/docs/Web/CSS/filter-function/opacity()) + - [`saturate()`](/fr/docs/Web/CSS/filter-function/saturate()) + - [`sepia()`](/fr/docs/Web/CSS/filter-function/sepia())
\ No newline at end of file diff --git a/files/fr/web/css/filter-function/opacity()/index.md b/files/fr/web/css/filter-function/opacity()/index.md index 94fdf38c7b..1b106fa0c2 100644 --- a/files/fr/web/css/filter-function/opacity()/index.md +++ b/files/fr/web/css/filter-function/opacity()/index.md @@ -1,39 +1,56 @@ --- title: opacity() slug: Web/CSS/filter-function/opacity() -tags: - - CSS - - Filtre - - Fonction - - Reference translation_of: Web/CSS/filter-function/opacity() +browser-compat: css.types.filter-function.opacity --- {{CSSRef}} -La fonction CSS **`opacity()`** permet de modifier la transparence de l'image. Le résultat obtenu par cette fonction est une valeur {{cssxref("<filter-function>")}}. +La fonction CSS **`opacity()`** permet de modifier la transparence de l'image. Le résultat obtenu par cette fonction est une valeur [`<filter-function>`](/fr/docs/Web/CSS/filter-function). -{ {EmbedInteractiveExample("pages/css/function-opacity.html")}} +{{EmbedInteractiveExample("pages/css/function-opacity.html")}} -> **Note :** Cette fonction est proche de la propriété {{cssxref("opacity")}} mais, selon le navigateur, les filtres CSS peuvent bénéficier de l'accélération matérielle pour de meilleures performances. +> **Note :** Cette fonction est proche de la propriété [`opacity`](/fr/docs/Web/CSS/opacity) mais, selon le navigateur, les filtres CSS peuvent bénéficier de l'accélération matérielle pour de meilleures performances. ## Syntaxe - opacity(multiplicateur) +```css +opacity(multiplicateur) +``` ### Paramètres - `multiplicateur` - - : L'intensité de l'opacité, indiquée comme un nombre ({{cssxref("<number>")}}) ou comme un pourcentage ({{cssxref("<percentage>")}}). Une valeur de `0%` entraînera une image complètement transparente. Une valeur de `100%` laissera l'image inchangée. Les valeurs intermédiaires auront un effet proportionnel. Lors d'une interpolation, la valeur par défaut utilisée sera `1`. + - : L'intensité de l'opacité, indiquée comme un nombre ([`<number>`](/fr/docs/Web/CSS/number)) ou comme un pourcentage ([`<percentage>`](/fr/docs/Web/CSS/percentage)). Une valeur de `0%` entraînera une image complètement transparente. Une valeur de `100%` laissera l'image inchangée. Les valeurs intermédiaires auront un effet proportionnel. Lors d'une interpolation, la valeur par défaut utilisée sera `1`. ## Exemples +### Exemples de valeurs correctes pour opacity() + ```css opacity(0%); /* Complètement transparente */ opacity(50%); /* 50% transparent */ opacity(1); /* Aucun effet */ ``` +## Spécifications + +{{Specifications}} + +## Compatibilité des navigateurs + +{{Compat}} + ## Voir aussi -- {{cssxref("<filter-function>")}} -- La propriété CSS {{cssxref("opacity")}} +- La propriété CSS [`opacity`](/fr/docs/Web/CSS/opacity) +- [`<filter-function>`](/fr/docs/Web/CSS/filter-function) et les autres fonctions associées + - [`blur()`](/fr/docs/Web/CSS/filter-function/blur()) + - [`brightness()`](/fr/docs/Web/CSS/filter-function/brightness()) + - [`contrast()`](/fr/docs/Web/CSS/filter-function/contrast()) + - [`drop-shadow()`](/fr/docs/Web/CSS/filter-function/drop-shadow()) + - [`grayscale()`](/fr/docs/Web/CSS/filter-function/grayscale()) + - [`hue-rotate()`](/fr/docs/Web/CSS/filter-function/hue-rotate()) + - [`invert()`](/fr/docs/Web/CSS/filter-function/invert()) + - [`saturate()`](/fr/docs/Web/CSS/filter-function/saturate()) + - [`sepia()`](/fr/docs/Web/CSS/filter-function/sepia())
\ No newline at end of file diff --git a/files/fr/web/css/filter-function/saturate()/index.md b/files/fr/web/css/filter-function/saturate()/index.md index a695458598..dc487e25b4 100644 --- a/files/fr/web/css/filter-function/saturate()/index.md +++ b/files/fr/web/css/filter-function/saturate()/index.md @@ -1,30 +1,30 @@ --- title: saturate() slug: Web/CSS/filter-function/saturate() -tags: - - CSS - - Filtre - - Fonction - - Reference translation_of: Web/CSS/filter-function/saturate() +browser-compat: css.types.filter-function.saturate --- {{CSSRef}} -La fonction CSS **`saturate()`** permet d'accentuer ou de réduire la saturation d'une image. La valeur obtenue par cette fonction est une valeur de type {{cssxref("<filter-function>")}}. +La fonction CSS **`saturate()`** permet d'accentuer ou de réduire la saturation d'une image. La valeur obtenue par cette fonction est une valeur de type [`<filter-function>`](/fr/docs/Web/CSS/filter-function). {{EmbedInteractiveExample("pages/css/function-saturate.html")}} ## Syntaxe - saturate(multiplicateur) +```css +saturate(multiplicateur) +``` ### Paramètres - `multiplicateur` - - : L'intensité de la modification sous la forme d'un nombre ({{cssxref("<number>")}}) ou d'un pourcentage ({{cssxref("<percentage>")}}). Une valeur inférieure à `100%` réduira la saturation et une valeur supérieure accentuera la saturation. Une valeur de `0%` désaturera complètement l'image alors qu'une valeur de `100%` laissera l'image inchangée. Lors d'une interpolation, la valeur par défaut est `1`. + - : L'intensité de la modification sous la forme d'un nombre ([`<number>`](/fr/docs/Web/CSS/number)) ou d'un pourcentage ([`<percentage>`](/fr/docs/Web/CSS/percentage)). Une valeur inférieure à `100%` réduira la saturation et une valeur supérieure accentuera la saturation. Une valeur de `0%` désaturera complètement l'image alors qu'une valeur de `100%` laissera l'image inchangée. Lors d'une interpolation, la valeur par défaut est `1`. ## Exemples +### Exemples de valeurs correctes pour saturate() + ```css saturate(0); /* Complètement sous-saturée */ saturate(.4); /* Sous-saturée à 40% */ @@ -32,6 +32,23 @@ saturate(100%); /* Aucun effet */ saturate(200%); /* Saturation doublée */ ``` +## Spécifications + +{{Specifications}} + +## Compatibilité des navigateurs + +{{Compat}} + ## Voir aussi -- {{cssxref("<filter-function>")}} +- [`<filter-function>`](/fr/docs/Web/CSS/filter-function) et les autres fonctions associées + - [`blur()`](/fr/docs/Web/CSS/filter-function/blur()) + - [`brightness()`](/fr/docs/Web/CSS/filter-function/brightness()) + - [`contrast()`](/fr/docs/Web/CSS/filter-function/contrast()) + - [`drop-shadow()`](/fr/docs/Web/CSS/filter-function/drop-shadow()) + - [`grayscale()`](/fr/docs/Web/CSS/filter-function/grayscale()) + - [`hue-rotate()`](/fr/docs/Web/CSS/filter-function/hue-rotate()) + - [`invert()`](/fr/docs/Web/CSS/filter-function/invert()) + - [`opacity()`](/fr/docs/Web/CSS/filter-function/opacity()) + - [`sepia()`](/fr/docs/Web/CSS/filter-function/sepia())
\ No newline at end of file diff --git a/files/fr/web/css/filter-function/sepia()/index.md b/files/fr/web/css/filter-function/sepia()/index.md index 684423073f..565a8f60a4 100644 --- a/files/fr/web/css/filter-function/sepia()/index.md +++ b/files/fr/web/css/filter-function/sepia()/index.md @@ -1,36 +1,52 @@ --- title: sepia() slug: Web/CSS/filter-function/sepia() -tags: - - CSS - - Filtre - - Fonction - - Reference translation_of: Web/CSS/filter-function/sepia() +browser-compat: css.types.filter-function.sepia --- {{cssref}} -La fonction CSS **`sepia()`** convertit une image en sépia, lui donnant un aspect plus jaune/marron, voire vielli. Le résultat obtenu est une valeur de type {{cssxref("<filter-function>")}}. +La fonction CSS **`sepia()`** convertit une image en sépia, lui donnant un aspect plus jaune/marron, voire vielli. Le résultat obtenu est une valeur de type [`<filter-function>`](/fr/docs/Web/CSS/filter-function). {{EmbedInteractiveExample("pages/css/function-sepia.html")}} ## Syntaxe - sepia(multiplicateur) - +```css +sepia(multiplicateur) +``` ### Paramètres - `multiplicateur` - - : L'intensité de la conversion indiquée sous la forme d'un nombre ({{cssxref("<number>")}}) ou d'un pourcentage ({{cssxref("<percentage>")}}). Une valeur de `100%` permttra d'obtenir une image complètement sépia tandis qu'une valeur de `0%` laissera l'image inchangée. Les valeurs entre `0%` et `100%` représenteront des conversions proportionnelles. Lors d'une interpolation, la valeur par défaut sera `0`. + - : L'intensité de la conversion indiquée sous la forme d'un nombre ([`<number>`](/fr/docs/Web/CSS/number)) ou d'un pourcentage ([`<percentage>`](/fr/docs/Web/CSS/percentage)). Une valeur de `100%` permettra d'obtenir une image complètement sépia tandis qu'une valeur de `0%` laissera l'image inchangée. Les valeurs entre `0%` et `100%` représenteront des conversions proportionnelles. Lors d'une interpolation, la valeur par défaut sera `0`. ## Exemples +### Exemples de valeurs correctes pour sepia() + ```css sepia(0); /* Aucun effet */ sepia(.65); /* 65% de sépia */ sepia(100%); /* Complètement sépia */ ``` +## Spécifications + +{{Specifications}} + +## Compatibilité des navigateurs + +{{Compat}} + ## Voir aussi -- {{cssxref("<filter-function>")}} +- [`<filter-function>`](/fr/docs/Web/CSS/filter-function) et les autres fonctions associées + - [`blur()`](/fr/docs/Web/CSS/filter-function/blur()) + - [`brightness()`](/fr/docs/Web/CSS/filter-function/brightness()) + - [`contrast()`](/fr/docs/Web/CSS/filter-function/contrast()) + - [`drop-shadow()`](/fr/docs/Web/CSS/filter-function/drop-shadow()) + - [`grayscale()`](/fr/docs/Web/CSS/filter-function/grayscale()) + - [`hue-rotate()`](/fr/docs/Web/CSS/filter-function/hue-rotate()) + - [`invert()`](/fr/docs/Web/CSS/filter-function/invert()) + - [`opacity()`](/fr/docs/Web/CSS/filter-function/opacity()) + - [`saturate()`](/fr/docs/Web/CSS/filter-function/saturate())
\ No newline at end of file |