Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    Aug 2003
    Posts
    72
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Gradient Effect (???)

    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

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,622
    Thanks
    6
    Thanked 1,001 Times in 974 Posts
    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/g...dient_tcat.gif

    I guess it’s the combination of colors that makes it look nice.

  • #3
    New Coder
    Join Date
    Aug 2003
    Posts
    72
    Thanks
    3
    Thanked 0 Times in 0 Posts
    So I can put that in a long layer? How does it repeat (appear continuous)?

    Thanks,

    mark4man

  • #4
    Regular Coder
    Join Date
    Apr 2005
    Posts
    315
    Thanks
    18
    Thanked 2 Times in 2 Posts
    Quote Originally Posted by mark4man View Post
    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;

  • #5
    New Coder
    Join Date
    Aug 2003
    Posts
    72
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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

  • #6
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Here's a bit of the code.

    Does it help?

    Frank


    Code:
    .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;
    }
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #7
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    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.
    Code:
    <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>
    Last edited by Apostropartheid; 10-31-2007 at 07:05 PM.

  • #8
    New Coder
    Join Date
    Aug 2003
    Posts
    72
    Thanks
    3
    Thanked 0 Times in 0 Posts
    CyanLight...

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

    Thanks,

    mark4man

  • #9
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    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
    The (effpeetee) code above is taken from the working program. So it obviously works.

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •