<filter-function>

Baseline Widely available

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis ⁨septembre 2016⁩.

Letype de donnée CSS<filter-function> représente un effet graphique qui peut modifier l'apparence d'une image. Il est notamment utilisé avec les propriétésfilter etbackdrop-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é.

blur(): Floute l'image.
brightness(): Rend l'image plus claire ou plus sombre.
contrast(): Augmente ou diminue le contraste de l'image.
drop-shadow(): Applique une ombre portée derrière l'image.
grayscale(): Convertit l'image en niveaux de gris.
hue-rotate(): Modifie la teinte globale de l'image.
invert(): Inverse les couleurs de l'image.
opacity(): Rend l'image transparente.
saturate(): Sature ou désature fortement l'image.
sepia(): Convertit l'image en sépia.

Syntaxe formelle

<filter-function> =
<blur()>|
<brightness()>|
<contrast()>|
<drop-shadow()>|
<grayscale()>|
<hue-rotate()>|
<invert()>|
<opacity()>|
<sepia()>|
<saturate()>

<blur()> =
blur(<length>?)

<brightness()> =
brightness([<number>|<percentage>]?)

<contrast()> =
contrast([<number>|<percentage>]?)

<drop-shadow()> =
drop-shadow([<color>?&&<length>{2,3}])

<grayscale()> =
grayscale([<number>|<percentage>]?)

<hue-rotate()> =
hue-rotate([<angle>|<zero>]?)

<invert()> =
invert([<number>|<percentage>]?)

<opacity()> =
opacity([<number>|<percentage>]?)

<sepia()> =
sepia([<number>|<percentage>]?)

<saturate()> =
saturate([<number>|<percentage>]?)

Cet exemple fournit une image, un menu déroulant pour choisir entre les différents types de fonctions de filtre, et un curseur pour faire varier la valeur utilisée dans la fonction de filtre. La modification des contrôles met à jour l'effet de filtre en temps réel, ce qui permet d'observer l'effet de chaque filtre.

Le menu déroulant permet de sélectionner le nom de la fonction, et le curseur règle la valeur du paramètre pour cette fonction. Pourdrop-shadow, la valeur est utilisée à la fois pour le décalage horizontal et vertical, et le rayon est fixé à la moitié de cette valeur.

<div></div><ul>  <li>    <label for="filter-select">Choisissez une fonction de filtre&nbsp;:</label>    <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&nbsp;: <code></code></p>  </li></ul>

div {  width: 100%;  height: 512px;  background-image: url("https://mdn.github.io/shared-assets/images/examples/fx-nightly-512.png");  background-repeat: no-repeat;  background-position: center 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;}

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) {  switch (filter) {    case "blur":      slider.value = 0;      slider.min = 0;      slider.max = 30;      slider.step = 1;      slider.setAttribute("data-unit", "px");      break;    case "brightness":    case "contrast":    case "saturate":      slider.value = 1;      slider.min = 0;      slider.max = 4;      slider.step = 0.05;      slider.setAttribute("data-unit", "");      break;    case "drop-shadow":      slider.value = 0;      slider.min = -20;      slider.max = 40;      slider.step = 1;      slider.setAttribute("data-unit", "px");      break;    case "opacity":      slider.value = 1;      slider.min = 0;      slider.max = 1;      slider.step = 0.01;      slider.setAttribute("data-unit", "");      break;    case "grayscale":    case "invert":    case "sepia":      slider.value = 0;      slider.min = 0;      slider.max = 1;      slider.step = 0.01;      slider.setAttribute("data-unit", "");      break;    case "hue-rotate":      slider.value = 0;      slider.min = 0;      slider.max = 360;      slider.step = 1;      slider.setAttribute("data-unit", "deg");      break;    default:      console.error("Jeu de filtre inconnu");  }}function setDiv(filter) {  const unit = slider.getAttribute("data-unit");  const offset = `${Math.round(slider.value)}${unit}`;  const radius = `${Math.round(Math.abs(slider.value / 2))}${unit}`;  divElem.style.filter =    filter === "drop-shadow"      ? `${selectElem.value}(${offset} ${offset} ${radius})`      : `${selectElem.value}(${slider.value}${unit})`;  updateOutput();  updateCurValue();}function updateOutput() {  output.textContent = slider.value;}function updateCurValue() {  curValue.textContent = `filter: ${divElem.style.filter}`;}setSlider(selectElem.value);setDiv(selectElem.value);