filter CSS propriété

Définition de la CSS filter.

La propriété de Filtre CSS filter permet de spécifier une/des fonctions de Filtre CSS qui correspondront au divers effets à appliquer sur un élément HTML.

filter : contrast(400%);
filter : grayscale(0.5) blur(10px);
filter : sepia(20%) opacity(10%) drop-shadow(20px 20px 20px #000);

La propriété de Filtre CSS filter peut prendre comme valeur de Filtre :

• none, aucun filtre Css,
• url() : applique un filtre Css "filtre SVG",
• blur() : applique un Filtre CSS "flou gaussien",
• brightness() : applique un Filtre CSS de luminosité,
• contrast() : applique un Filtre CSS de contraste,
• drop-shadow() : applique un Filtre CSS d'ombre portée,
• grayscale() : applique un Filtre CSS de niveaux de gris ,
• hue-rotate() : applique un Filtre CSS de rotation de la teinte,
• invert() : applique un Filtre CSS d'inversion de couleurs,
• opacity() : applique un Filtre CSS d'opacité,
• saturate() : applique un Filtre CSS de saturation ,
• sepia() : applique un Filtre CSS sépia.

La propriété de Filtre CSS filter peut prendre un ou plusieurs fonctions séparées par un espace.

Exemple de code filter CSS

Conditions d'application de la CSS filter.

La propriété de Filtre CSS filter est utilisée que sur des éléments graphiques.
Ne pas confondre avec le filter ou -ms-filter d'Internet Explorer < 10 :

filter : progid:DXImageTransform.Microsoft.Shadow( Strength=2, Direction=135, Color='#305052' );

Problème d'interprétation de filter en Css.

La propriété de Filtre CSS filter CSS n'est pas reconnue pour tous les navigateur.
Safari, Chrome utilisent la propriété CSS préfixée -webkit-filter.

Conditions d'animation de filter en CSS3.

Mettez filter comme valeur de propriété de Transition CSS transition-property.

La CSS filter est une propriété de feuille de style qui peut être utilisée pour les animations CSS et transitions CSS.