Gradient Effect (???)

mark4man · Oct 30, 2007

Hello...

Can someone take a look at this site:

http://www.historum.com/

& explain how they (the designer) accomplished the gradient effect in the horizontal header bars ['World History' (& 'Forum', below it), etc.] The combination of colors & gradients on this page...I love it.

Thanks very much,

mark4man

Barrucadu · Oct 30, 2007

A background image.

Joe · Oct 30, 2007

They would of made the gradient in perhaps firefox or photoshop.
Then they would export it to a sensible file type, e.g. .gif, .jpeg or .png
Then they would put the following in the <head></head> of the page:

Code:

<style>
tr {
   background-image: url(image.png);
}

If they only wanted it to do that on a tr with a specific id then they would put in the <head></head> of the page:

Code:

<style>
td#idname {
   background-image: url(image.png);
}

kwaping · Oct 30, 2007

View source on that page and it'll show you how to do it. Here's the relevant CSS style for the table headers:

Code:

.thead
{
	background: #102330 url(images/545/gradients/gradient_thead.gif) repeat-x top left;
	color: #727F89;
	font: 8pt tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}

And then...

Code:

<tbody>
	<tr>
		<td class="tcat" colspan="5">
			<a style="float:right" href="#top" onclick="return toggle_collapse('forumbit_6')"><img id="collapseimg_forumbit_6" src="images/545/buttons/collapse_tcat.gif" alt="" border="0" /></a>

			<a href="forumdisplay.php?amp;f=6">World History</a>
			
			
		</td>
	</tr>
</tbody>

Find the word "tcat" in the second bit of code.

-Ollie

Gradient Effect (???)

More options

mark4man

Established Member

Barrucadu

Established Member

Joe

VIP Member

kwaping

Established Member

Similar threads

We're social

New posts ➔

Auction activity ➔

How do you think a potential buyer first checks if your domain is for sale?

Polls of interest ➔

Hot this week ➔

Community favorite ➔

Hot this month ➔

Blog favorites

drbarnhart.com

AiChemicals.com

TravelGalleries.com

VinToken.com

MetaTeens.com

MetroAutomotive.com

OpeneWallet.com

BestOfBreed.com

O-S-G.com

FancyWebDesign.com

Pinned

Appreciation

Agreement

Answers

Relevance

Reaction

Status

Feeling