Given a transparent PNG displaying a simple shape in white, is it possible to somehow change the color of this through CSS? Some kind of overlay or what not?
|
You can use filters by So you can now change color of a PNG file with filters now.
|
|||||||||||||||||||||
|
|
You might want to take a look at Icon fonts. http://css-tricks.com/examples/IconFont/ EDIT: I'm using Font-Awesome on my latest project. You can even bootstrap it. Simply put this in your
And then go ahead and add some icon-links like this:
Here's the full cheat sheet --edit-- Font-Awesome uses different class names in the new version, probably because this makes the CSS files drastically smaller, and to avoid ambiguous css classes. So now you should use:
EDIT 2: Just found out github also uses its own icon font: Octicons It's free to download. They also have some tips on how to create your very own icon fonts. |
|||||||||
|
|
The img tag has a background property just like any other. If you have a white PNG with a transparent shape, like a stencil, then you can do this:
|
|||||||||||||||||
|
|
Yes :)
|
|||||||||
|
|
I've been able to do this using SVG filter. You can write a filter that multiplies the color of source image with the color you want to change to. In the code snippet below, flood-color is the color we want to change image color to (which is Red in this case.) feComposite tells the filter how we're processing the color. The formula for feComposite with arithmetic is (k1*i1*i2 + k2*i1 + k3*i2 + k4) where i1 and i2 are input colors for in/in2 accordingly. So specifying only k1=1 means it will do just i1*i2, which means multiplying both input colors together. Note: This only works with HTML5 since this is using inline SVG. But I think you might be able to make this work with older browser by putting SVG in a separate file. I haven't tried that approach yet. Here's the snippet:
|
||||
|
|
|
There's no need for a whole font set if you only need one icon, plus I feel it being more "clean" as an individual element. So, for this purpose, in HTML5 you can place a SVG directly inside the document flow. Then you can define a class in your .CSS stylesheet and access its background color with the Working fiddle: http://jsfiddle.net/qmsj0ez1/ Note that, in the example, I've used |
|||
|
|
|
To literally change the color, you could incorporate a CSS transition with a -webkit-filter where when something happens you would invoke the -webkit-filter of your choice. For example:
|
|||
|
|
|
In most browsers, you can use filters :
See demos below.
|
background-colorCSS property. You can create non-transparent part that will be fixed, and transparent part of image which will be filled by any color you like via CSS. Is that what you want to achieve? – jakub.g Sep 14 '11 at 11:58