3

Is there a way to make a grayscale image in chrome via css?

I have tried this but doesn't work on latest version of chrome

Community
  • 1
  • 1
alex
  • 580
  • 1
  • 4
  • 12

4 Answers4

7

support for native CSS filters in webkit has been added from the current version 19.0.1084.46

so -webkit-filter: grayscale(1) will work and which is better and easier approach than SVG for webkit...

hjindal
  • 588
  • 7
  • 16
5

Another solution would be svg with a level of indirection.

Basically, <img src="wrapper.svg"/> where wrapper.svg applies an svg filter to the svg, and the svg has an image element pointing to your raster image. Works in Opera, Chrome, Firefox and probably IE10 (untested).

Here's a demo. You can pass in your own url if you encodeURIComponent it first. Note though that for passing in parameters to work it relies on scripting being enabled, so if you need to use it in <img> elements or in a css background image you'd need to generate the svg files on the server.

Erik Dahlström
  • 59,452
  • 12
  • 120
  • 139
  • 1
    Wow, that's really sweet! Just a heads up; I embedded it and had to make two minor tweaks, remove `.toLowerCase()` for case sensitive urls and `arr` should be an object `{}`. – bennedich Jan 17 '12 at 15:48
  • I want a grayscale effect when hovering the image.Is this possible with your solution? – alex Jan 17 '12 at 22:17
  • Thanks, I updated the example above with the suggested fixes, and added an animated example: http://dahlström.net/svg/filters/make-grayscale-filter-on-hover.svg#url=boston.jpg (worked fine in Opera and Firefox. Chrome seemed to not get the mouseout events, possibly this is only when loaded standalone though, and IE doesn't support SVG Animations). It's quite possible to do the animation with scripting too though. – Erik Dahlström Jan 18 '12 at 09:09
  • yes it seems scripting is the only way for now for a cross browser solution – alex Jan 18 '12 at 10:59
2

Not yet, but Chrome 18 will support css filters (released later this year). SVG filters is only supported by Firefox. You should be able to find a consistent canvas+javascript solution though.

EDIT: See Erik Dahlström's post for alternate solution.

bennedich
  • 12,150
  • 6
  • 33
  • 41
  • 1
    SVG filters are supported by all browsers (counting IE10 too) in SVG content. But it's true that at the moment Firefox is the only browser that supports use of svg filters directly on HTML content. – Erik Dahlström Jan 17 '12 at 12:27
  • True, I should have been more specific about the context. – bennedich Jan 17 '12 at 13:11
1

Here's an HTML5 solution. Supported by current versions of Chrome: http://webdesignerwall.com/demo/html5-grayscale/

henryaaron
  • 6,042
  • 20
  • 61
  • 80