Can CSS be used to tint a gray level icon?

css

Solution

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 */ 

}

Problem

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/

Original source

Related problems