...

View Full Version : Gradient Effect (???)



mark4man
10-30-2007, 01:19 AM
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

VIPStephan
10-30-2007, 01:41 AM
Thatís pretty simple. You create a rectangle with a gradient fill from dark blue to a lighter blue. The actual image they used is here: http://www.historum.com/images/545/gradients/gradient_tcat.gif

I guess itís the combination of colors that makes it look nice. :)

mark4man
10-31-2007, 12:13 AM
So I can put that in a long layer? How does it repeat (appear continuous)?

Thanks,

mark4man

michael180
10-31-2007, 02:03 AM
So I can put that in a long layer? How does it repeat (appear continuous)?

Thanks,

mark4man

You might try this.

background: url(filename.gif) repeat-x top left;

mark4man
10-31-2007, 06:02 PM
that doesn't seem to work (for this dummy, anyaway.)

I'm creating a long layer, of the same height as that gradient .gif (31 px); & a length of 779 px (to accomodate 800 X 600 screen res.) I pop the image in; & the layer looks like:

<div id="Layer2" style="position:absolute; left:0px; top:145px; width:779px; height:31px; z-index:2"><img src="gradient_tcat.gif" width="19" height="31"> </div>

no matter where I place the repat tag in the div, it comes out as text on the screen.

mark4man

effpeetee
10-31-2007, 06:12 PM
Here's a bit of the code.

Does it help?

Frank



.tcat
{
background: #102330 url(images/545/gradients/gradient_tcat.gif) repeat-x top left;
color: #FAA802;
font: bold 10pt Arial, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
text-align:center;
}.tcat a:link, .tcat_alink
{
color: #FAA802;
text-decoration: none;
}
.tcat a:visited, .tcat_avisited
{
color: #FAA802;
text-decoration: none;
}
.tcat a:hover, .tcat a:active, .tcat_ahover
{
color: #FAA802;
text-decoration: none;
}
.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;
}.thead a:link, .thead_alink
{
color: #727F89;
text-decoration: none;
}

Apostropartheid
10-31-2007, 07:03 PM
Excuse me if I'm wrong, but if you want to repeat it, it can't be an image -- set the image as the background of the div, i.e.

<div id="Layer2" style="position: absolute; left: 0px; top: 145px; width: 779px; height: 31px; z-index: 2; background: url(gradient_tcat.gif) top left repeat-x;"> </div>

mark4man
10-31-2007, 07:48 PM
CyanLight...

H_ll no...u ain't rong !!! Works like a charm.

Thanks,

mark4man

effpeetee
10-31-2007, 07:51 PM
Excuse me if I'm wrong, but if you want to repeat it, it can't be an image -- set the image as the background of the divThe (effpeetee) code above is taken from the working program. So it obviously works.

Frank



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum