You see it everywhere on the web... Table headers or page headers using some type of gradient or fade as the background to the header... Just look at this page that you are looking at right now (I'm using the "Expert" skin)! I have Illustrator CS2 and it is easy enough to create a gradient image that can be used for a background.
I want to know if there is some way to create an overlay image that uses transparency that would work with ANY color background. I am a coder, not a designer or graphic artist or anything like that. I figure there has to be some way to create this image such that I can change the background color (in CSS) to whatever I want, and let the same background image create the appearance of a gradient with that color.
I was mildly successful at making this happen. I just did a a gradient from white to black, set the opacity to 50%, and saved it as a PNG24. It kinda worked, but the "white" part at the top washed out the background color that it was on top of and it didn't really look right. For the non-techie graphic artist like me, I think what I wanted is that instead of using white as one of the colors in the gradient, I wanted to use transparent. But I couldn't find a way to do that (and that might not be possible?).
Here is an example CSS of what I was thinking I could make work. The idea here is that you could (programatically) change the background color of the gradient as the page is served, rather than having to create a whole bunch of different images with the color you wanted. My only other concern with this approach is how to handle varying heights of the actual containing block and a fixed image size, but first things first! Is something like this possible or just a pipe dream?
This Question has been solved and asker verified All Experts Exchange premium technology solutions are available to subscription members.
Experts Exchange has been collecting answers to technology questions since 1996…3 million and counting! If you have a question, chances are we already have your answer.
If you can't find the exact answer you're looking for, ask our exclusive community of 50,000 experts. You’ll get a personalized answer from a trusted professional.
Thousands of free tech tips, tricks, how-to’s and tutorials are available in our peer reviewed articles section. See for yourself how smart our experts are, no login required.
Save solutions to your questions, answers you’ve discovered through searching plus helpful articles in your personal knowledgebase for easy future access.
Access the answers to your technology questions today.
30-day free trial. Register in 60 seconds.
Members of the expert community talk about why the experience at Experts Exchange is different than what you will find anywhere else.
Try it out and discover for yourself.
30-day free trial. Register in 60 seconds.
Join the community of experts here and help other tech pros by answering question in your area of expertise. You can earn FREE access to all Experts Exchange's premium features and resources.
The image above is transparent, it just looks white on the left because of the background.
You could also do transparent to black with partial opacity...
Transparent to black, 65% opacity.
I suppose I should explain how to do this in CS2. (the above were done in Photoshop, which makes this much easier, but if all you have is Illustrator, you can do it there too)
Create a black rectangle (if you want a transparent to black gradient)
Over that make another rectangle with a black to white gradient (black will become transparent)
Select the rectangle and the gradient, then click the arrow in the Transparency palette
Select "Make Opacity mask"
Save as PNG24
Sweet! So gradient from TRANSPARENT to black (or white or whatever) is possible. I guess the only question left is, how do I do this with Illustrator CS2? I tried to drag and drop the transparent color swatch to the gradient bar, but that didn't take. What is the trick? (or how did you actually create this image you have posted?)
The only other thing to work on for implementation... The header that I am using will vary in height based on the font that is being used (and may vary beyond my control). It would seem like I can just make the image "extra tall" and cover the bases. I am doing a vertical gradient, so the height of the content is a player. I suppose I could just make several versions of the gradient for differing anticipated heights... Would there be a way to scale the image to the container (stretch or shrink) wihtout too much fuss?
I never know if I'm asking a tough question, easy question, or asking the impossible. Creating the gradient overlay image with a transparent to black gradient was the key, and that works perfectly given the supplied instructions! Thanks!
I have attached a sample just for completeness. I made this one extra tall, this could be used for my large headers (text size 18pt). It is 60px tall overall. If one line is used in the header, then only the top half (or so) is visible. If the table header happens to be two lines tall, then it still works OK, just the bottom half is no longer a gradient, just a solid color. Which I suppose is fine.
Ideally, you could create this gradient image, and it would auto scale to the size of it's container (a td in this case) in the Y direction, and just repeat in the X direction.
I'm afraid I don't follow your idea on the small gradient... If you tiled in the Y direction, wouldn't you get stripes instead of a smooth gradient from top to bottom? I might just need to post this problem up in the CSS zone as a separate question.
Test gradient (with red background included for clarity)
As for the sizing, I don't think CSS can stretch the image.
By vertically aligning center you have a few options though:
1. Make it as big as would be needed; With a smaller image the gradient might not be as dramatic, and there will be some effect on the color.
2. Make it as small as would be needed; as you noted above you will end up with areas that are pure color, and have no gradient.
3. Split the difference. With a gradient halfway between the biggest and smallest, it should look ok at both sizes. It won't ever be perfect, but it won't ever be really bad either.
OK, that is kind of what I figured would happen unless I could figure out a way to auto size. I did some searching and this looked the most promising. I had to select the text to read it. =)
http://blog.urbanmainframe
I might try something like this if I get real ambitious, but what you've got me now is already really good, it just has a few caveates (what doesn't?).
Thanks again!
Business Accounts
Answer for Membership
by: statler01Posted on 2009-08-12 at 12:00:43ID: 25081682
You can make a PNG24 that fades from transparent to black, or whatever color you want...
Transparent to black PNG.