CSS
Propriété de filtre
Recherche…
Syntaxe
- filtre: aucun (valeur par défaut)
- filtre: initial (par défaut à aucun);
- filter: inherit (par défaut à la valeur parente);
- filtre: flou (px)
- filtre: luminosité (nombre |%)
- filtre: contraste (nombre |%)
- filtre: ombre portée (ombre horizontale-ombre-px-ombre-px-ombre-blur-px-propagation de la couleur)
- filtre: échelle de gris (nombre |%)
- filtre: teinte-rotation (deg)
- filtre: inverser (nombre |%)
- filtre: opacité (nombre |%)
- filtre: saturé (nombre |%)
- filtre: sépia (nombre |%)
Paramètres
| Valeur | La description |
|---|---|
| flou (x) | Floue l'image par x pixels. |
| luminosité (x) | Éclaircit l'image à n'importe quelle valeur supérieure à 1,0 ou 100%. En dessous, l'image sera assombrie. |
| contraste (x) | Fournit plus de contraste à l'image pour toute valeur supérieure à 1,0 ou 100%. En dessous, l'image sera moins saturée. |
| ombre portée (h, v, x, y, z) | Donne à l'ombre une ombre portée. h et v peuvent avoir des valeurs négatives. x, y et z sont facultatifs. |
| échelle de gris (x) | Affiche l'image en niveaux de gris, avec une valeur maximale de 1,0 ou 100%. |
| teinte rotation (x) | Applique une teinte-rotation à l'image. |
| inverser (x) | Inverse la couleur de l'image avec une valeur maximale de 1,0 ou 100%. |
| opacité (x) | Définit l'opacité / la transparence de l'image avec une valeur maximale de 1,0 ou 100%. |
| saturer (x) | Sature l'image à n'importe quelle valeur supérieure à 1,0 ou 100%. En dessous, l'image commence à se désaturer. |
| sépia (x) | Convertit l'image en sépia avec une valeur maximale de 1,0 ou 100%. |
Remarques
Puisque filter est une fonctionnalité expérimentale, vous devez utiliser le préfixe -webkit. Cela peut changer dans la syntaxe et le comportement, mais les changements vont probablement être petits.
Il peut ne pas être pris en charge dans les anciennes versions des principaux navigateurs. Il peut être entièrement non pris en charge dans les navigateurs mobiles.
En raison de son support relativement limité, essayez d'utiliser
box-shadowau lieu defilter: drop-shadow(). Utilisez l'opacityau lieu dufilter: opacity().Il peut être animé via Javascript / jQuery. Pour Javascript, utilisez
object.style.WebkitFilter.W3Schools a également une page de démonstration pour tous les différents types de valeurs de filtre.
Ombre portée (utilisez plutôt l'ombre de la boîte si possible)
HTML
<p>My shadow always follows me.</p>
CSS
p {
-webkit-filter: drop-shadow(10px 10px 1px green);
filter: drop-shadow(10px 10px 1px green);
}
Résultat
Plusieurs valeurs de filtre
Pour utiliser plusieurs filtres, séparez chaque valeur par un espace.
HTML
<img src='donald-duck.png' alt='Donald Duck' title='Donald Duck' />
CSS
img {
-webkit-filter: brightness(200%) grayscale(100%) sepia(100%) invert(100%);
filter: brightness(200%) grayscale(100%) sepia(100%) invert(100%);
}
Résultat
Teinte Rotation
HTML
<img src='donald-duck.png' alt='Donald Duck' title='Donald Duck' />
CSS
img {
-webkit-filter: hue-rotate(120deg);
filter: hue-rotate(120deg);
}
Résultat
Inverser la couleur
HTML
<div></div>
CSS
div {
width: 100px;
height: 100px;
background-color: white;
-webkit-filter: invert(100%);
filter: invert(100%);
}
Résultat
Tourne du blanc au noir.
Brouiller
HTML
<img src='donald-duck.png' alt='Donald Duck' title='Donald Duck' />
CSS
img {
-webkit-filter: blur(1px);
filter: blur(1px);
}
Résultat
Tu veux frotter tes lunettes.
