Forums

Give help. Get help.

  • # August 9, 2017 at 4:55 am

    I’m trying to apply color and opacity filters to an image: https://codepen.io/Angeles4four/pen/zdwNwd

    I got the opacity filter working, but not the color. I tried adding a green value to both a color property and background-color property in the CSS. But it’s not doing what I want. I feel like the solution I am asking for is going to be very trivial. Any help?

    I Googled filter and colorize images css which turned up a helpful guide by CSS Tricks guest blog poster, Amelia Bellamy-Royds, titled “Color Filters Can Turn Your Gray Skies Blue”: https://css-tricks.com/color-filters-can-turn-your-gray-skies-blue/
    I took a look at Amelia’s CodePens and can’t find the solution I am looking for.

    What would you ppl recommend I could try next?

    # August 9, 2017 at 5:33 am

    I took a look at Amelia’s CodePens and can’t find the solution I am looking for

    I think you’ve overlooked the pens with the feColorMatrix https://codepen.io/AmeliaBR/pen/WvwwME

    The matrix is a bit daunting (not something I plan on delving into myself) but you can use this handy online generator to work out the values https://codepen.io/jacobberglund/pen/ORNQAr

    There’s also this generator, which is even easier http://blog.andresgalante.com/RGBAtoFeColorMatrix/

    In both cases, just slide the bars until you achieve the effect you’re after.

    # August 11, 2017 at 4:44 pm

    Thank you, @beverleyh. I did overlook those pens. And the generator by Andres Galante is tremendously helpful.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag