Can I create reusable transparent glass effect buttns/bannrs

[Cavar]

NOTE: If this subject line still isn't suitable for the forum mods, then I give up...

Hi,

I'm a web developer that's new to graphics, so have no clue what to search for, and was wondering if there was a way to simplify my life and was hoping you guys could help.

I was poking around the net when I stumbled across The Sketch Pad : Wet Paint and liked the gradient glass effect they use for section headers and such. The ones that are light blue on top and then darker blue on bottom.

I know I won't word this correctly, but I hope I make myself clear...

Is there a way to produce a semi-transparent effect like that in an image so that I can put it in a HTML table cell then just change the table cell back color so that I can have one image that can be any color and look like it has a glass gradient effect?

If there's no way without creating an image for every color I may need, then I guess that's what I will have to do.

Thanks in advance,

CT

[Mr. Monkey]

You can create a white to transparent gradient and give it a higher z-index than the text and backdrop color. That would make it look sort of like my signature but it would be in a cell with a solid backdrop.

[sagedavis]

The reason why a subject line wouldn't be ok by the mods is if you are too general with it.

and with great reason. It's hard to keep track of all those posts with subject lines that say "Help me"... then you get like 5 of them with the same subject, and no one can remember which one it was that they posted to.

Plus no one is just going to pick your post because you are you, the deal is there are rules, it's a sticky, which says "read this, YOU, yes YOU." located http://paintdotnet.12.forumer.com/viewtopic.php?t=3446 with all of the rules of the board so that everyone is playing nice. :-)

Like you, I am a web programmer, and fairly new to graphics, however, I have gotten to a point where I can function with Paint.net (PDN).

The short answer to your glass effect gradient question is yes..... However.... the effect will not be as good as if you do each one by hand.

Your thinking like sort of a "lense" type thing.

And, it can be done, sort of.

Just make a gradiant which looks like a tube, using only white to grey, or even, white to black, and then set it's transparency to something like 103 percent (or lower, or higher to your heart's content).

You HAVE to save a PNG, as GIF doesn't deal well with semitransparent images. Your fall back is that, those using IE6 or lower, can not see the transparency at all with PNG.

Your best bet is to create new graphics for each color that you want. Or perhaps, create several different buttons 1 of each of the 7 colors of the rainbow, and just keep them in stock.

When in doubt, try it out.

Sage

EDIT::::: What? Z index? Where is that? Never seen it on PDN but deal with it all the time in 3d.

[Cavar]

You can create a white to transparent gradient and give it a higher z-index than the text and backdrop color. That would make it look sort of like my signature but it would be in a cell with a solid backdrop.

Yeah, that is what I am looking for. It doesn't need to be too fancy or glassy, just so long as it has what looks like a little light reflecting.

The thing is, all I want is the effect. The background color and text will be set via HTML. I will have to play around with PDN and see if I can come up with something.

CT

[Cavar]

The reason why a subject line wouldn't be ok by the mods is if you are too general with it.

and with great reason. It's hard to keep track of all those posts with subject lines that say "Help me"... then you get like 5 of them with the same subject, and no one can remember which one it was that they posted to.

Plus no one is just going to pick your post because you are you, the deal is there are rules, it's a sticky, which says "read this, YOU, yes YOU." located http://paintdotnet.12.forumer.com/viewtopic.php?t=3446 with all of the rules of the board so that everyone is playing nice. :-)

I understand completly. I looked at the RULES thread, but apparently I was too busy trying to comprehend the letter "a" that I missed item #4. :oops:

I think what I am wanting is something like Mr. Monkey's sig/banner, but I have clue zero about this Z Index is in PDN. I know Z Order in programming, so I was thinking it may have something to do with layers.

Either way, I'll keep plugging away until I figure it out, but any suggestions and/or tutorials for PDN that might get me started would be a great help.

Since PDN is fairly new I haven't found many articles, except for Photoshop articles, which seem to make up every 3rd page on the net.

Thanks,

CT

[Crazy Man Dan]

"z-index" here is referring to the CSS:

element {
z-index:1;
}

Giving an HTML element a z-index higher than 0 (page layer) tells that object that it should appear on top of whatever is lower than it on the Z axis. It's useful if you have multiple absolutely positioned elements, but doesn't play very nicely with inline or floated elements.

May I ask, by what method will the HTML set the background and text color? I may have a solution...

[Cavar]

"z-index" here is referring to the CSS:

element {
z-index:1;
}

Giving an HTML element a z-index higher than 0 (page layer) tells that object that it should appear on top of whatever is lower than it on the Z axis. It's useful if you have multiple absolutely positioned elements, but doesn't play very nicely with inline or floated elements.

May I ask, by what method will the HTML set the background and text color? I may have a solution...

Both the background color and cell text will be pulled from a database. Then I will either use a stylesheet that is built dynamically or standard HTML attributes such as bgcolor="" to implement the style I am looking for.

The users will basically be able to pick various color themes and I didn't want to have a lot of graphics for things like tabs and headers. I wanted them to just pick a color, then when the HTML is rendered it puts the glass effect in the cell that happens to be tab.

I hope this is what you were asking for, but if not just let me know.

Thanks,

CT

[Bob]

.button {
background-color: mycolor;
background-image: url(mygradient.png);
background-repeat:repeat-x;
}

Why z-index?

http://www.bibinou.com/dev/start/

There's no green in the image.

[Mr. Monkey]

z-index for glass.

It must be in front of the text.

[Crazy Man Dan]

Both the background color and cell text will be pulled from a database. Then I will either use a stylesheet that is built dynamically or standard HTML attributes such as bgcolor="" to implement the style I am looking for.

The users will basically be able to pick various color themes and I didn't want to have a lot of graphics for things like tabs and headers. I wanted them to just pick a color, then when the HTML is rendered it puts the glass effect in the cell that happens to be tab.

I hope this is what you were asking for, but if not just let me know.

Thanks,

CT

Well, you could create 1 pixel wide / tall repeating images in each color, then dynamically change the class of the

tag. For instance:

.element {
background-repeat:repeat-y;
background-position:top;
}
.greentheme .element {
background-image:url(images/greentabrpt.png);
color:#fff;
}
.bluethere .element {
background-image:url(images/bluetabrpt.png);
color:#fff;
}
.whitetheme .element {
background-image:url(images/whitetabrpt.png);
color:#000;
}

Then use whatever language you're using to output the class="[greentheme|bluetheme|whitetheme]" to the

tag, and the CSS will grab that color image for the element.

Now, if you're using images that aren't easily repeated, such as tabs with rounded corners, it'd be trickier. You could use a 1 pixel wide image for the tab body and two five / ten / whatever pixel wide image for all tab ends on the page. If you went that route, you'd then have to set up id's for each link and the tab ends on both sides. Then you could set up a class like so:

.greenstyle .tableft {
background:url(images/greentableft.png) no-repeat top;
}
.greenstyle .tabright {
background:url(images/greentabright.png) no-repeat top;
}
.greenstyle .tablefthov {
background:url(images/greentablefthov.png) no-repeat top;
}
.greenstyle .tabrighthov {
background:url(images/greentabrighthov.png) no-repeat top;
}
.bluestyle .tableft {
background:url(images/bluetableft.png) no-repeat top;
}
...

You could then set the tab ends to the class="[tableft|tabright]" and use Javascript to change the tab ends to .className = "[tablefthov|tabrighthov]". Then, since the image of the tab ends is set to depend on the class name of the body, you could use the same Javascript function to change all tabs regardless of the selected style.

Now, this discussion is getting a ways away from PDN related stuff. If you have any more questions regarding the coding / scripting / CSS end, feel free to email me at crazymandan@gmail.com. If you have questions related to the creation of images, then feel free to continue posting here!

And just to clear things up, z-index would not be the best option in this case, as bringing a white image on top of HTML text would cover the text. Using a PNG with an alpha channel still wouldn't work in IE6.

[Cavar]

Actually, I ended up creating something close enough with a friend at work that has photoshop, then I produced something in PDN.

Here's a sample:

The top tab bars were done in Photoshop and the bottom were done in PDN. It's basically a white to transparent gradient image that I use as a table cells background, then I set the cell bgcolor to what ever I want and I don't have to fool with CSS other than to set the cell borders as I did in the sample.

Though the PDN version isn't exactly what I wanted it'll do for now while I continue to play with PDN. I like the Photoshop version as well, but it's a little too subtle.

I still want to try to reproduce Mr. Monkey's sig version in PDN, but haven't had time.

Thanks for the help,

CT