How to edit Image/Elements using filter Property of CSS?
- Add a gray mask with CSS ?
Question
Filters list (Syntaw)
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
Examples:
Convert block/image ... to black and white (Gray out):
div {
-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
filter: grayscale(100%);
}
NOTE : Filter is not working in IE, Solutions:
For images :
https://gianlucaguarini.github.io/jQuery.BlackAndWhite/ (https://github.com/GianlucaGuarini/jQuery.BlackAndWhite)
http://work.karlhorky.com/gray/ (https://github.com/karlhorky/gray)
For any elements: GRAYSCALE.JS
http://james.padolsey.com/css/grayscaling-in-non-ie-browsers/ (http://james.padolsey.com/demos/grayscale/grayscale.js)
Comments