6

I've some icons on my webapp that are in gray level with a transparent background.

Is it possible to give a tint to a such image through CSS ? I would dream of something letting me play with saturation and hue of an image or an element.

If it doesn't exist, is it under discussion for a future version of CSS ?

This is the kind of image I would like to color : http://www.clker.com/clipart-transparent-arrow.html

This NOT what I want to do : jQuery: there is a way to apply colour (tint) to an image?

One workaround would be to use JavaScript http://www.pixastic.com/lib/

Community
  • 1
  • 1
AsTeR
  • 7,247
  • 14
  • 60
  • 99
  • What image do you have, and what do you want it to look like post-tint? – David Thomas Aug 18 '12 at 15:31
  • There's an example image link in the question. I would like to be able to change in CSS wether it's green, orange or violet. – AsTeR Aug 18 '12 at 15:32
  • Yes, but that isn't *your* image, though it demonstrates, at least, what you want. Ideally, though, questions should be self-contained, because if that page dies, or is moved, then the question becomes somewhat nonsensical. – David Thomas Aug 18 '12 at 15:41

3 Answers3

7

There is way, you can read full story on link below, but that is CSS3 and may not work on some older browsers

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

some examples 

img.icon {
      -webkit-filter: sepia(78%);
}

img.icon {
      -webkit-filter: grayscale(100%);  /* safari/chrome */
      -moz-filter: grayscale(100%); /* firefox */
      -ms-filter: grayscale(100%);  /* IE >= 9 */
      -o-filter: grayscale(100%); /* Opera, if support CSS3 */
      filter: gray; filter: grayscale(100%); /* edge browsers */ 

}
Milan Jaric
  • 5,556
  • 2
  • 26
  • 34
  • 1
    It's better to provide an answer rather than a link to an answer, it could disappear and make your answer irrelevant with time. – AsTeR Aug 18 '12 at 15:35
  • 1
    yes, you are right, I always edit my questions after initial post, anyway, many people in SO doing this ;) – Milan Jaric Aug 18 '12 at 15:36
  • PS : this just rocks (compatibility is not a major problem in my case) – AsTeR Aug 18 '12 at 15:36
  • glad to help, but there is also firefox css properties, I will add them shortly in answer – Milan Jaric Aug 18 '12 at 15:37
  • ... This is cool but really incompatible according to http://caniuse.com/#search=filter – AsTeR Aug 18 '12 at 15:42
  • you can use SVG but I never used filters anyway in any of my projects... we have designer who is dealing with such things in team :) – Milan Jaric Aug 18 '12 at 15:46
  • Yes but I'm using lesscss, centering theme related variable in one file is a real plus for me. – AsTeR Aug 18 '12 at 15:49
  • less should have filter mixin out of the box, you don't even need to deal with vendor prefixes – Milan Jaric Aug 18 '12 at 15:53
1

You could add a pseudo-element with rgba() on top of your icon.

Also, if using an unicode character instead of an image, you could use rgba() or hsla() for that as well.

Ana
  • 35,599
  • 6
  • 80
  • 131
  • As mentioned in my question that's not what I want to achieve. – AsTeR Aug 18 '12 at 15:47
  • If using an icon font or a Unicode character instead of an image you can use any color value, not just `rgba()` or `hsla()`. It's the simplest way to do it with CSS. – BoltClock Aug 18 '12 at 15:55
  • Of course, I never said you couldn't use another kind of colour value. You can even try text masking http://lea.verou.me/2012/05/text-masking-the-standards-way/ – Ana Aug 18 '12 at 15:59
0

You can use greyscale jQuery plugin, it is very useful and easy to use

http://www.pryde-design.co.uk/2011/08/greyscale-jquery-plugin/

Razmig
  • 609
  • 1
  • 4
  • 10