Default CSS filter values for brightness and contrast

Question

Recently I've updated Chrome to v.26 and pictures which were displayed using HTML5 canvas were not visible anymore. As I found I had to change to brightness and contrast.

How are the values for BC for CSS filters different depending on the browser engine?

Default:

Brightness:  0; contrast 100: Firefox ? 
Brightness:100; contrast:100: Chrome ?

As I found out it is actually a bug fix for Chrome: https://code.google.com/p/chromium/issues/detail?id=168004

Solution

I found this and it will certainly help you. The syntax is something like this.

.thing_you_want_to_filter {
  /*
    these are all default values, note that hue-rotate and blur have units.
    You'll also need to include the vendor prefixes.
  */
  filter: grayscale(0);
  filter: sepia(0);
  filter: saturate(1);
  filter: hue-rotate(0deg);
  filter: invert(0);
  filter: opacity(1);
  filter: brightness(0);
  filter: contrast(1);
  filter: blur(0px);

  /* Drop shadow has the same syntax as box-shadow – see below for why it's amazing! */
  filter: drop-shadow(5px 5px 10px #ccc);
}

Chrome 18.0+ and Safari 6+ are the only browsers that support this. For Safari under version 6 it would be like this:

.img
 {
  -webkit-filter:contrast(100%); /* play with the percentages */
  -webkit-filter:brightness(100%);
 }

You can read the sources yourself

http://net.tutsplus.com/tutorials/html-css-techniques/say-hello-to-css3-filters/ http://css3.bradshawenterprises.com/filters/

Comments

[NoBugs]

Nice. How is there not a Firefox addon for adjusting display of images!? - it wouldn't be hard to do with canvas, and looks like it is also possible with css.