Monotone PNG

Support
#1

Hey Guys,

Was wondering if you could help me with creating a grayscale image filter (that’s from Red/White, rather than Black/White)

I got this method which works great for jpg’s

.filtered {
   background: #ff0000;
}

.filtered img {
  mix-blend-mode: screen;
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%)
  opacity: 1;
}

Unfortunately, this doesn’t work for PNG’s as it fills the whole background.

Im trying to achieve this

(Emulated Images)

Change an image

To This

What i end up creating

#2

Hey @MolemanProductions,

Thanks for writing in.

Firstly, please make sure that the PNG image you are using does not have a solid background color in the image itself so the image must have a transparent background.

Then try using this code instead:


.filtered img {
    -webkit-filter: invert(40%) grayscale(100%) brightness(40%) sepia(100%) hue-rotate(-50deg) saturate(400%) contrast(2);
    filter: grayscale(100%) brightness(40%) sepia(100%) hue-rotate(-50deg) saturate(600%) contrast(0.8);
}

Hope this helps.

#3

Thanks Jade, I was after more of an screen effect (not multiply).
Your result.

I did find these 2 websites that are working (and would allow the color to be easily calculated for other projects)
But I can’t find extract the CSS code?


Really like this program

the other site is:

#4

Hi @MolemanProductions,

The 2 sites above you have shared did not use plain CSS. The image was recreated using SVG and canvas element.
I tried to check other sites too and it seems a limitation of CSS on png. Checked the following too.


Unfortunately, since this is not an issue with the theme we cannot help further at this moment. You might want to check for another option to achieve it. This might help:

Thank you for understanding.

#5

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.