ocellnuri Posted April 16, 2005 Share Posted April 16, 2005 I've just redesigned my blog at blog.ocell.net. I haven't done web-dev in years, and I basically reverse engineered a Blogger template, learning CSS along the way. I want a gradient background, so I made a one pixel wide image that starts white and ends blueish, repeating across the page. Then I tried to match the hex value for that final blue hue in the image with the background color set in the browser by my css file. It looks great in Firefox, but the colors don't match up in Safari or IE. How can I choose a color that can be reproduced in my image, and reproduced by all Browsers? Thanks in advance for any help! Quote Link to comment Share on other sites More sharing options...
Striver Posted April 16, 2005 Share Posted April 16, 2005 I've just redesigned my blog at blog.ocell.net. I haven't done web-dev in years, and I basically reverse engineered a Blogger template, learning CSS along the way. I want a gradient background, so I made a one pixel wide image that starts white and ends blueish, repeating across the page. Then I tried to match the hex value for that final blue hue in the image with the background color set in the browser by my css file. It looks great in Firefox, but the colors don't match up in Safari or IE. How can I choose a color that can be reproduced in my image, and reproduced by all Browsers? Thanks in advance for any help! <{POST_SNAPBACK}> try this... http://www.verchi.com/tech/html/colorchart.htm Lee Quote Link to comment Share on other sites More sharing options...
woodygap Posted April 16, 2005 Share Posted April 16, 2005 This is a link that Don has shared in the past. http://www.ficml.org/jemimap/style/color/wheel.html All the Best, Woody Quote Link to comment Share on other sites More sharing options...
ocellnuri Posted April 16, 2005 Author Share Posted April 16, 2005 Thanks guys. What's the difference between "web-safe" and "web-smart"? Quote Link to comment Share on other sites More sharing options...
Striver Posted April 16, 2005 Share Posted April 16, 2005 Thanks guys. What's the difference between "web-safe" and "web-smart"? <{POST_SNAPBACK}> web safe is the 216 color palet using jumps of 3: 00 33 66 99 CC web smart uses a larger palet with jumps of 1: 11 22 33 44... Lee Quote Link to comment Share on other sites More sharing options...
ocellnuri Posted April 16, 2005 Author Share Posted April 16, 2005 Thanks. Now it looks like my problem is my color settings in Photoshop... everything that's blue in Windows comes up Purple in OSX. I just made a colorsafe jpg in Windows, and it shows up purplish in safari but safari renders the web-smart color as blue. I've really stepped in it. Quote Link to comment Share on other sites More sharing options...
Striver Posted April 16, 2005 Share Posted April 16, 2005 Thanks. Now it looks like my problem is my color settings in Photoshop... everything that's blue in Windows comes up Purple in OSX. I just made a colorsafe jpg in Windows, and it shows up purplish in safari but safari renders the web-smart color as blue. I've really stepped in it. <{POST_SNAPBACK}> what version of PhotoShop are you using? Lee Quote Link to comment Share on other sites More sharing options...
ocellnuri Posted April 16, 2005 Author Share Posted April 16, 2005 (edited) I'm using Photoshop CS. If you're still looking at the page at all, you'll see that I've tried to match grey, and I can't get that to work. Edited April 16, 2005 by ocellnuri Quote Link to comment Share on other sites More sharing options...
Striver Posted April 16, 2005 Share Posted April 16, 2005 I'm using Photoshop CS. If you're still looking at the page at all, you'll see that I've tried to match grey, and I can't get that to work. <{POST_SNAPBACK}> What is the version number? Before version 6, Photoshop wasn't quite geared to the web yet. You might take a look in the edit menu of photoshop under color settings and see what you have there Lee Quote Link to comment Share on other sites More sharing options...
ocellnuri Posted April 16, 2005 Author Share Posted April 16, 2005 Thanks! You hit the nail on the head. Under the Edit Menu I was able to to go into "Color Settings..." and set it to Web Graphics Defaults. Thanks a ton! (CS is 8.0) Quote Link to comment Share on other sites More sharing options...
Striver Posted April 16, 2005 Share Posted April 16, 2005 Thanks! You hit the nail on the head. Under the Edit Menu I was able to to go into "Color Settings..." and set it to Web Graphics Defaults. Thanks a ton! (CS is 8.0) <{POST_SNAPBACK}> Great! Glad I could help The layout looks nice Lee Quote Link to comment Share on other sites More sharing options...
ocellnuri Posted April 16, 2005 Author Share Posted April 16, 2005 Well the websafe #666666 still isn't working out in Safari... It's too late for this now, but I think you've got me going down the right track. Thanks for the comment on the layout, I've learned a lot in the last day about CSS. Quote Link to comment Share on other sites More sharing options...
ocellnuri Posted April 16, 2005 Author Share Posted April 16, 2005 Well I had decided it was too late to work on this, and I got in bed, and I had an idea... knowing I wouldn't be able to sleep until I tried it. And even better, it solved my problem! I'm posting it here in case anyone else goes crazy trying to do a gradient background that works across systems. Instead of making a background image that fades from white to my target background color, I made an image that fades from white to transparent. I saved it as a PNG. Now I can change the background color in my style sheet without having to make a new image every time. If this is a bad idea, please let me know. Thanks again for the help! Quote Link to comment Share on other sites More sharing options...
owatagal Posted April 16, 2005 Share Posted April 16, 2005 I don't think Internet Explorer can render transparency in PNG files; I think they end up as solid colors. I could be wrong, but you might want to check. Quote Link to comment Share on other sites More sharing options...
Deverill Posted April 16, 2005 Share Posted April 16, 2005 Consider your target audience. If a significant number of them have older browsers then PNGs may not be the way to go since the older browsers didn't consistently support them. If most of them have the new browsers you shouldn't have a problem. You can check your AWStats to see what they are using. Note: "significant" and "most" are for you to define based on your site type, purpose, audience, etc. Quote Link to comment Share on other sites More sharing options...
ocellnuri Posted April 17, 2005 Author Share Posted April 17, 2005 Thanks for the tips everyone! Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.