Le filtrage en CSS permet d’ajouter des effets visuels à une image ou à un élément HTML. Les filtres peuvent être utilisés pour ajuster l’opacité, la saturation, la teinte, le contraste et d’autres propriétés visuelles.
1. Utilisation de la propriété “filter”:
```
img {
filter: grayscale(50%);
}
```
Ce code convertit 50% de l’image en noir et blanc.
1. Vous pouvez également combiner plusieurs filtres :
```
img {
filter: grayscale(50%) contrast(200%);
}
```
Ce code convertit 50% de l’image en noir et blanc et double également le contraste de l’image.
Voici quelques méthodes de filtrage que vous pouvez utiliser :
- `blur()`: Applique un flou sur l’image.
- `brightness()`: Ajuste la luminosité de l’image.
- `contrast()`: Ajuste le contraste de l’image.
- `drop-shadow()`: Applique une ombre portée sur l’image.
- `grayscale()`: Convertit l’image en niveaux de gris.
- `hue-rotate()`: Ajuste la teinte de l’image.
- `invert()`: Inverse les couleurs de l’image.
- `opacity()`: Ajuste l’opacité de l’image.
- `saturate()`: Sature les couleurs de l’image.
- `sepia()`: Convertit l’image en sépia.
1. Utilisation de la propriété “backdrop-filter”:
La propriété `backdrop-filter` en CSS ajuste comment un élément apparaît par rapport à tout ce qui est derrière lui sur la page Web :
```
div {
backdrop-filter: blur(10px);
}
```
Notez que la compatibilité du navigateur pour le `backdrop-filter` est un peu limitée par rapport à la propriété `filter`. Vous aurez besoin d’un préfixe de fournisseur pour certains navigateurs (par exemple, `-webkit-backdrop-filter: blur(10px);` pour Chrome et Safari).
N’oubliez pas que toutes ces propriétés et méthodes de filtrage doivent être utilisées avec précaution pour éviter de rendre votre site web visuellement déroutant ou incohérent.
