CSS Effets de filtre d'image
Filtres CSS
La propriété CSS filtre est utilisée pour ajouter des effets visuels (comme le flou et la saturation) aux éléments.
Dans la propriété filtre, vous pouvez utiliser les fonctions CSS suivantes :
-
blur() -
brightness() -
contrast() -
drop-shadow() -
grayscale() -
hue-rotate() -
invert() -
opacity() -
saturate() -
sepia()
La fonction CSS blur()
La fonction de filtre blur() applique un effet de flou à un élément. Une valeur plus grande créera un flou plus important.
Si aucune valeur n'est spécifiée, 0 est utilisé (aucun effet).
Exemple
Appliquez différents effets de flou aux éléments <img> :
#img1 {
filter: blur(2px);
}
#img2 {
filter: blur(6px);
} La fonction CSS brightness()
La fonction de filtre brightness() ajuste la luminosité d'un élément.
- 100 % est la valeur par défaut et représente la luminosité d'origine
- Les valeurs supérieures à 100 % fourniront des résultats plus lumineux
- Les valeurs inférieures à 100 % fourniront des résultats plus sombres
- 0 % rendra l'image complètement noire
Exemple
Rendez une image plus lumineuse et plus sombre que l'originale :
#img1 {
filter: brightness(150%);
}
#img2 {
filter: brightness(50%);
} La fonction CSS contrast()
La fonction de filtre contrast() ajuste le contraste d'un élément.
- 100 % est la valeur par défaut et représente le contraste d'origine
- Les valeurs supérieures à 100 % augmentent le contraste
- Les valeurs inférieures à 100 % diminuent le contraste
- 0 % rendra l'image complètement grise
Exemple
Augmentez et diminuez le contraste d'une image :
#img1 {
filter: contrast(150%);
}
#img2 {
filter: contrast(50%);
} La fonction CSS drop-shadow()
La fonction de filtre drop-shadow() applique un effet d'ombre portée à une image.
Exemple
Ajoutez différents effets d'ombre portée à une image :
#img1 {
filter: drop-shadow(8px 8px 10px gray);
}
#img2 {
filter: drop-shadow(10px 10px 7px lightblue);
} La fonction CSS grayscale()
La fonction de filtre grayscale() convertit une image en niveaux de gris.
- 100 % (ou 1) rendra l'image complètement en niveaux de gris
- 0 % (ou 0) n'aura aucun effet
Exemple
Définissez divers niveaux de gris pour une image :
#img1 {
filter: grayscale(1);
}
#img2 {
filter: grayscale(60%);
}
#img3 {
filter: grayscale(0.4);
} La fonction CSS hue-rotate()
La fonction de filtre hue-rotate() applique une rotation de couleur à un élément.
Cette fonction applique une rotation de teinte sur l'image. La valeur définit le nombre de degrés autour du cercle de couleur auquel l'image sera ajustée. Une rotation de teinte positive augmente la valeur de teinte, tandis qu'une rotation négative la diminue. 0deg représente l'image d'origine.
Exemple
Définissez diverses rotations de couleur pour une image :
#img1 {
filter: hue-rotate(200deg);
}
#img2 {
filter: hue-rotate(90deg);
}
#img3 {
filter: hue-rotate(-90deg);
} La fonction CSS invert()
La fonction de filtre invert() inverse les couleurs d'une image.
- 100 % (ou 1) inversera complètement les couleurs
- 0 % (ou 0) n'aura aucun effet
Exemple
Inversez les couleurs d'une image :
#img1 {
filter: invert(0.3);
}
#img2 {
filter: invert(70%);
}
#img3 {
filter: invert(100%);
} La fonction CSS opacity()
La fonction de filtre opacity() applique un effet d'opacité à un élément.
- 100 % (ou 1) n'aura aucun effet
- 50 % (ou 0.5) rendra l'élément 50 % transparent
- 0 % (ou 0) rendra l'élément complètement transparent
Exemple
Définissez diverses opacités pour une image :
#img1 {
filter: opacity(80%);
}
#img2 {
filter: opacity(50%);
}
#img3 {
filter: opacity(0.2);
} La fonction CSS saturate()
La fonction de filtre saturate() ajuste la saturation (intensité des couleurs) d'un élément.
- 100 % (ou 1) n'aura aucun effet
- 0 % (ou 0) rendra l'élément complètement désaturé
- 200 % (ou 2) rendra l'élément super saturé
Exemple
Définissez diverses saturations pour une image :
#img1 {
filter: saturate(0);
}
#img2 {
filter: saturate(100%);
}
#img3 {
filter: saturate(200%);
} La fonction CSS sepia()
La fonction de filtre sepia() convertit une image en ton sépia (une couleur plus chaude, plus brune/jaune).
- 0 % (ou 0) n'aura aucun effet
- 100 % (ou 1) applique un effet sépia complet
Exemple
Définissez divers effets sépia pour une image :
#img1 {
filter: sepia(1);
}
#img2 {
filter: sepia(60%);
}
#img3 {
filter: sepia(0.4);
} Fonctions de filtre CSS
Le tableau suivant répertorie les fonctions de filtre CSS :
| Fonction | Description |
|---|---|
| blur() | Applique un effet de flou à un élément |
| brightness() | Ajuste la luminosité d'un élément |
| contrast() | Ajuste le contraste d'un élément |
| drop-shadow() | Applique un effet d'ombre portée à une image |
| grayscale() | Convertit une image en niveaux de gris |
| hue-rotate() | Applique une rotation de couleur à un élément |
| invert() | Inverse les couleurs d'une image |
| opacity() | Applique un effet d'opacité à un élément |
| saturate() | Ajuste la saturation (intensité des couleurs) d'un élément |
| sepia() | Convertit une image en sépia |