Menu
Is it possible to change, with the CSS Filter methods like HueRotate, Saturation, and Brightness, the color of a PNG drawn totally white? Like Photoshop's color overlay effect, but in CSS.
This would be a good solution to avoid creating lots of images that change only color. For example, a set of icons that have dark and light versions for a UI.
934
We can change the image color in CSS by combining the opacity() and drop-shadow() functions in the filter property. We can provide the color of the shadow from the drop-shadow function, and we can set the shadow as thin as possible so that the image's color will only change without forming an actual shadow.
Fortunately you can add multiple styles in some properties like background-image and filter! To get this working you'll have to put all the filter styles in one space separated filter property.
The brightness() function can be used as a value to apply a linear multiplier to make it appear darker or lighter than the original. To make an image darker, any value below 100% could be used to darken the image by that percentage.
We can change the color of PNG image using following CSS styles: filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url() | initial | inherit; The above property is used to set the visual effect of the image.
You can also colorize white images by adding sepia and then some saturation, hue-rotation, e.g. in CSS:
filter: sepia() saturate(10000%) hue-rotate(30deg)
This should make white image as green image.
http://jsbin.com/xetefa/1/edit
176
This is a cool idea, but it will not work with a white image as you suggest. You can do it with a colored image, but not if it's all white. I tried the following in Safari using the webkit version of the CSS filter:
<div style="background-color:#FFF; -webkit-filter: hue-rotate(90deg); width:100px; height:100px; border:1px solid #000;"></div> But the box stays white. If I switch the color to blue like this:
<div style="background-color:#00F; -webkit-filter: hue-rotate(90deg); width:100px; height:100px; border:1px solid #000;"></div> I get a red box. This is because the filter works on the hue value which is not present in white or black.
23
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
