CSS Filters - Edit Image/Div using filter Property | Drupal 8

CSS Filters - Edit Image/Div using filter Property

Submitted by editor on Wed, 06/01/2016 - 13:46
Question

How to edit Image/Elements using filter Property of CSS?
- Add a gray mask with CSS ?

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)

Tags

Add new comment