Treehouse: Grow your CSS skills. Land your dream job.

Changing the hue of the contents of a PNG image

  • # February 9, 2010 at 7:26 pm

    What I’d like to do here is, create a PNG image in Photoshop, of some text in a non-web-friendly typeface. In white. On a transparent background.


    Put that image on my webpage, and using CSS somehow get the contents of the image, but not the transparent bits, to be able to change to any colour the page so desires.

    The end product would be for the title of the webpage to change to a colour befitting the random background image selected.

    I’ve messed around with using background-color but that obviously changes the transparent background.. not the contents of the image

    And I would LOVE to not have to use Javascript

    # February 9, 2010 at 7:51 pm

    If the user can change it themselves, you’ll probably need to use JS.

    If you are setting it up yourself, you can use a class on the <body> to specify which one shows depending on which page you’re on. … ecificity/

    # February 9, 2010 at 8:18 pm

    No the user wouldn’t be able to do the change.
    And the body id thing wouldnt work either.

    What I mean is, the background for every page is random. So every time the same page is viewed or refreshed, a most probably new, random background is picked out.

    So what I’m looking for is a flexible piece of CSS that I could easily use in this case, to change the colour of the text in my PNG title image.

    # February 9, 2010 at 9:01 pm

    if you want a random color every time page refreshes then css cannot help you. You have to use javascript or some server-side scripting to make random choises. the best you can do with css is to make some css classes you need and then let some script to pick randomly one of them.

    # February 10, 2010 at 4:48 am
    "tafkanator" wrote:
    the best you can do with css is to make some css classes you need and then let some script to pick randomly one of them.

    and thats exactly what I want.

    or for the server to change one css value, the hex value or whatever it would need to be, which relates to the image

    # February 10, 2010 at 8:26 am

    Well im not good at javascript but i can do basic php. I hope tou are using php.
    Here is what i came uo with:


    < ?php
    //Gives $num a random value between 1, 2 or 3.
    $num = Rand (1,3);
    //Based on the random number it chooses case it needs
    switch ($num)
    case 1:
    case 2:
    case 3:

    for hex hode i found a javascript solution:
    Didnt test for myself but i guess it works

    I think first solution is bit better because you have more control of what colors to display in your page. You can change your code too if you want. instead changing classes you can change hex value inside your class. But then you have to remember that php code have to be before the css class code

    # February 10, 2010 at 1:55 pm

    the problem being a simple background color change in CSS won’t work. Because that would just change what is transparent.

    What i need is for the text in my PNG image to change colour.

    # February 10, 2010 at 3:15 pm

    change css. dont use background. use color attribute
    #style1{color:#f000} and so on. Or am I missing something

    # February 10, 2010 at 3:17 pm

    This problem is going to require a script of some sort. Whether you want to use PHP or some form of JavaScript is up to you.

    You could use Cufon for the font and apply a color to it through CSS. That way you can control it far easier than using images.

    # February 10, 2010 at 6:59 pm

    how compatible is Cufon? Will it work in all browsers on all OS?

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

You must be logged in to reply to this topic.