- This topic is empty.
-
AuthorPosts
-
February 9, 2010 at 7:26 pm #27944skip88Member
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
February 9, 2010 at 7:51 pm #70703TheDocMemberIf 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.
February 9, 2010 at 8:18 pm #70706skip88MemberNo 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 #70709tafkanatorParticipantif 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 #70714skip88Member"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 #70715tafkanatorParticipantWell 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.aspfor hex hode i found a javascript solution:
http://paulirish.com/2009/random-hex-color-code-snippets/
Didnt test for myself but i guess it worksI 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 #70723skip88Memberthe 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 #70725tafkanatorParticipantchange css. dont use background. use color attribute
#style1{color:#f000} and so on. Or am I missing somethingFebruary 10, 2010 at 3:17 pm #70726TheDocMemberThis 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 #70734skip88Memberhow compatible is Cufon? Will it work in all browsers on all OS?
AuthorPostsViewing 10 posts - 1 through 10 (of 10 total)- The forum ‘CSS’ is closed to new topics and replies.