tags:

views:

9241

answers:

10

Is there a simple way to display a color bitmap in grayscale with just HTML/CSS? It doesn't need to be IE-compatible (and I imagine it won't be) -- if it works in FF3 and/or Sf3, that's good enough for me.

I know I can do it with both SVG and Canvas, but that seems like a lot of work right now. Is there a truly lazy person's way to do this?

+3  A: 

http://snipplr.com/view/2836/grayscale-img-with-css-crossbrowser/ (via http://www.google.com/search?q=css+grayscale)?

ax
wow, this looks scary ... CSS that modifies a "nearby" object?
cdonner
@cdonner What is scary about that CSS? It just absolutely positions a span inside a relative div to fill the containing div.
alex
That doesn't look scary. It looks like ... not grayscale. It's putting an opacity=0.2 black box over the image. That makes it darker, but not grayscale.
Ken
@Ken I didn't think it would too good.
alex
A: 

It's in fact easier to do it with IE if I remember correctly using a proprietary CSS property. Try this FILTER: Gray from http://www.ssi-developer.net/css/visual-filters.shtml

The method by Ax simply makes the image transparent and has a black background behind it. I'm sure you could argue this is grayscale.

Although you didn't want to use Javascript, I think you'll have to use it. You could also use a server side language to do it.

alex
I do not even have a Windows box, so thanks, but that's of little use to me.
Ken
In that case, you can look at it with a Virtual Machine with IE, implement ax's method or use canvas... note that grayscaling on large images with canvas can be quite taxing on the Javascript engine.
alex
`filter: gray` is present in Internet Explorer since *Version 4*. They have taken a lot of crap for their product - rightly! - but they were really ahead of their time with this stuff
Pekka
A: 

Well, the FITLER attribute is specific to Internet Explorer (IE).

I am not aware, but it might exist, a CSS supported attribute in other browsers that will allow you to do this.

If anyone know's ... please let us all know.

+3  A: 

Doesn't look like it's possible (yet), even with CSS3 or proprietary -webkit- or -moz- CSS properties.

However, I did find this post from last June that used SVG filters on HTML. Not available in any current browser (the demo hinted at a custom WebKit build), but very impressive as a proof of concept.

Roman Nurik
A: 

One terrible but workable solution: render the image using a Flash object, which then gives you all the transformations possible in Flash.

If your users are using bleeding-edge browsers and if Firefox 3.5 and Safari 4 support it (I don't know that either do/will), you could adjust the CSS color-profile attribute of the image, setting it to a grayscale ICC profile URL. But that's a lot of if's!

richardtallent
+2  A: 

Here is a great tutorial on this very subject. http://www.ajaxblender.com/howto-convert-image-to-grayscale-using-javascript.html

AljoPro
Although it was stated in the question that `Canvas` won't do, I guess it's the only way to do it for now.
Igor Zinov'yev
A: 

I found the solution!!! :)

I was playing around with PHP and remembered this question (god knows why)!

I think this might be exactly what you want, I got it from the PHP GD library and added some variable to automate the process...

<?php
$img = @imagecreatefromgif("php.gif");

if ($img) $img_height = imagesy($img);
if ($img) $img_width = imagesx($img);

// Create image instances
$dest = imagecreatefromgif('php.gif');
$src = imagecreatefromgif('php.gif');

// Copy and merge - Gray = 20%
imagecopymergegray($dest, $src, 0, 0, 0, 0, $img_width, $img_height, 20);

// Output and free from memory
header('Content-Type: image/gif');
imagegif($dest);

imagedestroy($dest);
imagedestroy($src);

?>

It is not html but it might just be what you want!

Good luck!

Trufa
The question is about using HTML/CSS only...
Tom
@Tom, based on the votes and favorites on the original question, the OP isn't the only person who wondered if this is possible. Sure, this answer might bend the rules, but I don't see the point in downvoting an answer that might be useful to a lot of people.
mlms13
@Tom, I though though it might no be an exact reply to the question,it might come in handy as it actually "solves" the problem of the grayscale without the "hassle" of javascript, maybe he didnt even consider or knew about PHP GD, no harm intended. @mlms13 that was the point exactly, thanks :)
Trufa
That's my bad , "thought" about _that other users can benefit from this post_ slipped away from my mind.. Apologies @Trufa.
Tom
@Tom don´t worry about it!! I realize this answer is in the limit of relevant and this things might happen! Thanks for the apology! :)
Trufa
A: 

If you're willing to use Javascript, then you can use a canvas to convert the image to grayscale. Since Firefox and Safari support <canvas>, it should work.

So I googled "canvas grayscale", and the first result was http://www.permadi.com/tutorial/jsCanvasGrayscale/index.html which seems to work.

scraimer
+1  A: 

in Internet Explorer use the filter property

in webkit and firefox there is currently no way to desatuarte an image solely with CSS. so you will need to use either canvas or SVG for a client side solution.

but i think using SVG is more elegant. check out my blog post for the SVG solution that works for both firefox and webkit: http://webdev.brillout.com/2010/10/desaturate-image-without-javascript.html

and strictly speaking since SVG is html the solution is pure html+css :-)

brillout.com
+1  A: 

Following on from brillout.com's answer, and also Roman Nurik's answer, and relaxing somewhat the the 'no SVG' requirement, you can desaturate images in Firefox using only a single SVG file and some CSS.

Your SVG file will look like this:

<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1"
     baseProfile="full"
     xmlns="http://www.w3.org/2000/svg"&gt;
    <filter id="desaturate">
        <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0
                                             0.3333 0.3333 0.3333 0 0
                                             0.3333 0.3333 0.3333 0 0
                                             0      0      0      1 0"/>
    </filter>
</svg>

Save that as resources.svg, it can be reused from now on for any image you want to change to greyscale.

In your CSS you reference the filter using the Firefox specific filter property:

.target {
    filter: url(resources.svg#desaturate);
}

Add the MS proprietary ones too if you feel like it, apply that class to any image you want to convert to greyscale (works in Firefox >3.5, IE8).

robertc