Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Changing the hue of the contents of a PNG image

  • This topic is empty.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #27944
    skip88
    Member

    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.

    THEN.

    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

    #70703
    TheDoc
    Member

    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.

    https://css-tricks.com/id-your-body-for- … ecificity/

    #70706
    skip88
    Member

    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.

    #70709
    tafkanator
    Participant

    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.

    #70714
    skip88
    Member
    "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

    #70715
    tafkanator
    Participant

    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:

    Code:


    http://www.w3schools.com/php/func_math_rand.asp

    for hex hode i found a javascript solution:
    http://paulirish.com/2009/random-hex-color-code-snippets/
    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

    #70723
    skip88
    Member

    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.

    #70725
    tafkanator
    Participant

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

    #70726
    TheDoc
    Member

    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.

    #70734
    skip88
    Member

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

Viewing 10 posts - 1 through 10 (of 10 total)
  • The forum ‘CSS’ is closed to new topics and replies.