CODEWITHSUNDEEP
jqueryhtmlcssimage
Alan2
Alan2

Reputation: 24572

How can I take the color out of an image with CSS?

I have an image on my web page like this:

<img src="/Images/content/home.png" alt="" style="float: left;">

Is there a CSS property that I can use to take some of the color out of this image without having to go into photoshop and edit the image. Even better are there any applications online that I can use to "process" the image and remove some color?

Upvotes: 1

Views: 432

Answers (4)

arttronics
arttronics

Reputation: 9955

A great jQuery plugin named vintageJS can convert images to grayscale and requires no server-side processing... it's all done in the viewers browser.

Effects available for Firefox, Chrome and other browsers are grayscale, blur-edges, sepia, desaturate, noise, brightness, contrast, curves, and more. Also, multi-effects can be done!

In reference to online apps that allow for image manipulation and then saving the image, the vintageJS Plugin has this cool Playground Webpage that allows you to upload any image, customize different effect on the fly, and download your edited image!

enter image description here

Upvotes: 2

anotherdave
anotherdave

Reputation: 6764

Even better are there any applications online that I can use to "process" the image and remove some color?

Hi Gemma,

You mentioned that you use Photoshop, but don't want to open it up in order to do this. If grayscaling images is something you'll have to do often, you should look into creating a Photoshop 'Droplet' for this. Basically, it lets you create a desktop shortcut that you can drag a file (or folder of files to) & it will carry out whatever task you've set up to automate within it, e.g.

  1. Open file
  2. Convert to b/w
  3. Save as [filename]-bw.jpg at 80% quality
  4. Close file

Here's a link to Adobe's docs on creating a droplet from an action to automate batch processing. Another option could be ImageMagick for batch processing images.

Upvotes: 1

abhshkdz
abhshkdz

Reputation: 6365

If you want to edit your images, there are excellent web apps for this purpose

CSS3/Webkit filters are what you are looking for. But as of now, these only work with Chrome Canary and Webkit Nightly. Effects available are grayscale, blur, sepia, saturate, opacity, brightness, contrast, hue-rotate, and invert.

Resources: CSS3 Filters

Instead, you could just set the opacity.

img {  
    opacity: .7;  
    //above line works in Firefox, Safari, Chrome, Opera
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);  
    // above line works in IE6, IE7, and IE8  
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=70)";  
    // above line is IE8 only
}

Upvotes: 1

manuskc
manuskc

Reputation: 794

Try setting opacity of image.

example:

img
{
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
}

Upvotes: 0

Related Questions