PDA

View Full Version : Gradient Effect (???)



mark4man
10-30-2007, 02: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, 02: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, 01:13 AM
So I can put that in a long layer? How does it repeat (appear continuous)?

Thanks,

mark4man

michael180
10-31-2007, 03: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, 07: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, 07: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, 08: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, 08:48 PM
CyanLight...

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

Thanks,

mark4man

effpeetee
10-31-2007, 08: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