Fonctions de PHP
Définition et utilisation da la propriété css
La propriété filtre définit des effets visuels (comme le flou et la saturation) sur un élément (souvent <img>).La Syntaxe CSS
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
Astuce : pour utiliser plusieurs filtres, séparez chaque filtre par un espace
| Valeurs par défaut | none |
|---|---|
| Inherited: | non |
| Animable : | oui En savoir plus sur l'animable |
| Version: | CSS3 |
| Syntaxe JavaScript: | object.style.filter="grayscale(100%)"; |
Prise en charge de la propriété css dans les navigateurs
Les numéros figurant dans le tableau indiquent la première version du navigateur qui prend totalement en charge la propriété.Les numéros suivis de -webkit-, -moz-, ou -o- indiquent la première version qui fonctionne avec un préfixe.
| Explorateur |  |  |  |  |  |
|---|---|---|---|---|---|
| Verssion | 53 18 -webkit- | 13.0 | 35.0 | 9.1 6.0 -webkit- | 40 15.0 -webkit- |
Liste des fonctions filtre et valeurs
Remarque : Les filtres utilisent des valeurs en pourcentage (par exemple 75%), acceptent également la valeur en décimal (par exemple 0,75).
blur(px): Applique un effet de flou à l'image. Plus la valeur est grande, plus le flou est important.
Dans le cas où aucune valeur n'est spécifiée, 0 est utilisé.
brightness(%): Règle la luminosité de l'image.
0% rendra l'image complètement noire.
100% (1) est la valeur par défaut et représente l'image originale.
plus la valeur est supérieure à 100 %, le résultat sera plus clair.
contrast(%) : Règle le contraste de l'image.
0% rendra l'image complètement noire.
100% (1) est la valeur par défaut, et représente l'image originale.
Les valeurs supérieures à 100 % donnent des résultats plus contrastés.
drop-shadow(h-shadow v-shadow blur spread color) : Applique un effet d'ombre portée à l'image.
Valeurs possibles :
h-shadow - Obligatoire. Spécifie une valeur de pixel pour l'ombre horizontale vers la droite. Les valeurs négatives placent l'ombre à gauche de l'image.
v-shadow - Obligatoire. Spécifie une valeur de pixel pour l'ombre verticale. Les valeurs négatives placent l'ombre au-dessus de l'image.
blur - Facultatif. Il s'agit de la troisième valeur, qui doit être exprimée en pixels. Ajoute un effet de flou à l'ombre. Plus la valeur est élevée, plus le flou est important (l'ombre devient plus grande et plus claire). Les valeurs négatives ne sont pas autorisées. Si aucune valeur n'est spécifiée, 0 est utilisé (le bord de l'ombre est net).
spread - Facultatif. Il s'agit de la quatrième valeur, qui doit être exprimée en pixels. Des valeurs positives entraîneront l'expansion de l'ombre et son agrandissement, et des valeurs négatives entraîneront son rétrécissement. Si elle n'est pas spécifiée, elle sera égale à 0 (l'ombre aura la même taille que l'élément). Remarque : Chrome, Safari et Opera, et peut-être d'autres navigateurs, ne prennent pas en charge cette 4e longueur ; elle ne sera pas rendue si elle est ajoutée.
color - Facultatif. Ajoute une couleur à l'ombre. Si elle n'est pas spécifiée, la couleur dépend du navigateur (souvent noire).
Exemple : création d'une ombre rouge, qui a une taille de 8px à la fois horizontalement et verticalement, avec un effet de flou de 10px : filtre : drop-shadow(8px 8px 10px red) ;
Remarque : ce filtre est similaire à la propriété box-shadow.
grayscale(%) : Convertit l'image en niveaux de gris.0% (0) est la valeur par défaut et représente l'image originale.
100% rendra l'image complètement grise (surtout utilisé pour les images en noir et blanc).
Remarque : les valeurs négatives ne sont pas autorisées. hue-rotate(deg) : Applique une rotation de la teinte sur l'image. La valeur définit le nombre de degrés autour du cercle chromatique que les échantillons de l'image seront ajustés. 0deg est la valeur par défaut, et représente l'image originale.
Exemple : filter: hue-rotate(90deg);
Remarque : la valeur maximale est de 360deg.);
invert(%) : Inverse les échantillons dans l'image.
0% (0) est la valeur par défaut et représente l'image originale.
100% (1) rendra l'image complètement inversée.
les valeurs négatives ne sont pas autorisées.
opacity(%) : Définit le niveau d'opacité de l'image. Le niveau d'opacité décrit le niveau de transparence, où :
0% est complètement transparent.
100% (1) est la valeur par défaut et représente l'image originale (aucune transparence).
Remarque : les valeurs négatives ne sont pas autorisées.
Conseil : Ce filtre est similaire à la propriété d'opacité.
saturate(%) : Elle est utilisée pour définir la saturation des éléments.
La valeur 0% saturate indique qu'un élément est complètement non saturé et
la valeur 100% saturate indique l'image originale.
La valeur supérieure à 100% indique que l'élément est super-saturé.
Remarque : les valeurs négatives ne sont pas autorisées.
sepia(%) : Il convertit l'image en une image sépia.
0% (0) est la valeur par défaut et représente l'image originale.
100% rendra l'image complètement sépia.
Remarque : les valeurs négatives ne sont pas autorisées.
url() : La fonction url() prend l'emplacement d'un fichier XML qui spécifie un filtre SVG, et peut inclure une ancre vers un élément de filtre spécifique. Exemple :
filter : url(svg-url#element-id)
initial : Définit cette propriété à sa valeur par défaut.
inherit : Hérite cette propriété de son élément parent.
Exemple montrant un filtre qui rend le niveau de gris de l'image à 50%
Exemple Copier le code
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>CSS propriété filter </title>
<style>
img {
filter: grayscale(50%);
}
</style>
</head>
<body>
<div>
<img src="https://placebear.com/640/360" alt="une image">
</div>
</body>
</html>
Exemple Animation propriété css filter
Exemple Copier le code
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>CSS animation propriété filter </title>
<style>
img {
animation: mymove 7s infinite;
}
@keyframes mymove {
50% {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
</style>
</head>
<body>
<div>
<img src="https://placebear.com/640/360" alt="une image">
</div>
</body>
</html>
Modifier la proprité css filter vec javascript
Exemple Copier le code
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>CSS modifier la propriété filter avec javascript </title>
</head>
<body>
<div>
<h1>Change filter avec JavaScript</h1>
<p>Cliquez sur le bouton pour changer la couleur de
l'image en niveaux de gris à 100%.</p>
<button onclick="Changer()"> CHANGER </button><br><br>
<img src="https://placebear.com/640/360"
alt="une image" id="monImage">
</div>
<script>
function Changer() {
document.getElementById("monImage").style.filter = "grayscale(100%)";
}
</script>
</body>
</html>