Results 1 to 12 of 12
  1. #1

    In need of CSS/Gradient help!

    I out some time into coding a few thing onto my boards, but cant handle a simple gradient overlay.

    Anyhow my code for my stylsheet looks like :

    Code:
    <STYLE TYPE='text/css'>
    A {
    text-decoration: none;
    }
    A:hover {
    text-decoration: underline;
    }
    
    BODY, TD {
    font-family: verdana,arial,sans-serif;
    font-weight: normal;
    font-size: 10pt;
    color: black;
    text-decoration: none;
    }
    
    .PlainText {
    font-family: verdana,arial,sans-serif;
    font-weight: normal;
    font-size: 10pt;
    color: black;
    text-decoration: none;
    }
    
    .MainTable {
    background-color: #cccccc;
    font-family: arial, helvetica, sans-serif;
    font-weight: normal;
    font-size: 10pt;
    color: black;
    text-decoration: none;
    }
    
    .MainMenuRowAlt {
    background-color: transparent;
    font-family: tahoma,arial,sans-serif;
    font-weight: bold;
    font-size: 9pt;
    color: yellow;
    text-decoration: none;
    }
    
    .MainMenuRow {
    background-color: #666666;
    font-family: tahoma,arial,sans-serif;
    font-weight: normal;
    font-size: 9pt;
    color: white;
    text-decoration: none;
    }
    
    .MainMenuLink {
    background-color: transparent;
    font-family: tahoma,arial,sans-serif;
    font-weight: bold;
    font-size: 9pt;
    color: white;
    text-decoration: none;
    }
    
    .MainMenuLinkLight {
    background-color: transparent;
    font-family: tahoma,arial,sans-serif;
    font-weight: bold;
    font-size: 9pt;
    color: #CCCCFF;
    text-decoration: none;
    }
    
    .BoardColumn {
    background-color: #999999;
    font-family: verdana,arial,sans-serif;
    font-weight: bold;
    font-size: 10pt;
    color: white;
    text-decoration: none;
    }
    
    .BoardColumnLink {
    background-color: transparent;
    font-family: verdana,arial,sans-serif;
    font-weight: bold;
    font-size: 10pt;
    color: white;
    text-decoration: none;
    }
    
    .BoardRowHeading {
    background-color: #b1b3bc;
    font-family: verdana,arial,sans-serif;
    font-weight: normal;
    font-size: 10pt;
    color: black;
    text-decoration: none;
    }
    
    .BoardRowHeadingLink {
    background-color: transparent;
    font-family: verdana,arial,sans-serif;
    font-weight: normal;
    font-size: 10pt;
    color: #000099;
    text-decoration: none;
    }
    
    .BoardRowBody {
    background-color: #c1c2c9;
    font-family: verdana,arial,sans-serif;
    font-weight: normal;
    font-size: 10pt;
    color: black;
    text-decoration: none;
    }
    
    .BoardRowBodySticky {
    background-color: #B1B2B9;
    font-family: verdana,arial,sans-serif;
    font-weight: normal;
    font-size: 10pt;
    color: black;
    text-decoration: none;
    }
    
    .BoardRowBodyLink {
    background-color: transparent;
    font-family: verdana,arial,sans-serif;
    font-weight: normal;
    font-size: 10pt;
    color: #000099;
    text-decoration: none;
    }
    
    .SubjectLink {
    background-color: transparent;
    font-family: verdana,arial,sans-serif;
    font-weight: bold;
    font-size: 10pt;
    color: #000099;
    text-decoration: none;
    }
    
    a.SubjectLink {
    background-color: transparent;
    font-family: verdana,arial,sans-serif;
    font-weight: bold;
    font-size: 10pt;
    color: #000099;
    text-decoration: none;
    }
    
    a.SubjectLink:active {
    background-color: transparent;
    font-family: verdana,arial,sans-serif;
    font-weight: bold;
    font-size: 10pt;
    color: #000099;
    text-decoration: none;
    }
    
    a.SubjectLink:visited {
    background-color: transparent;
    font-family: verdana,arial,sans-serif;
    font-weight: normal;
    font-size: 10pt;
    color: #000099;
    text-decoration: none;
    }
    
    .AuthorLink {
    background-color: transparent;
    font-family: verdana,arial,sans-serif;
    font-weight: bold;
    color: #000099;
    text-decoration: none;
    }
    
    .AuthorLinkSmall {
    background-color: transparent;
    font-family: verdana,arial,sans-serif;
    font-weight: bold;
    font-size: 8pt;
    color: #000099;
    text-decoration: none;
    }
    
    .VersionText {
    background-color: transparent;
    font-family: verdana,arial,sans-serif;
    font-weight: normal;
    font-size: 8pt;
    color: #777777;
    text-decoration: none;
    }
    
    .InputSection {
    background-color: transparent;
    font-family: verdana,arial,sans-serif;
    font-weight: bold;
    font-size: 10pt;
    color: black;
    text-decoration: none;
    }
    
    .InputNotes {
    background-color: transparent;
    font-family: verdana,arial,sans-serif;
    font-weight: normal;
    font-size: 9pt;
    color: maroon;
    text-decoration: none;
    
    width: 65%;
    }
    
    .SignatureTitle {
    background-color: transparent;
    font-family: verdana,arial,sans-serif;
    font-weight: bold;
    font-size: 9pt;
    color: maroon;
    text-decoration: none;
    }
    
    .SignatureText {
    background-color: transparent;
    font-family: verdana,arial,sans-serif;
    font-weight: normal;
    font-size: 9pt;
    color: #333333;
    text-decoration: none;
    }
    
    B     { font-weight: bold; }
    .red  { color: #880000; }
    .grey { color: #999999; }
    
    .statistictext { color: white; }
    .statisticvalue { color: yellow; }
    
    .QuotedText {
    border: 1px dashed #888888;
    background-color: #A1A3AC;
    font-family: verdana,arial,sans-serif;
    font-weight: normal;
    font-size: 9pt;
    color: white;
    text-decoration: none;
    margin-top: 5px;
    margin-left: 5px;
    margin-right: 5px;
    padding: 5px;
    }
    
    .tos {
    font-family: verdana,arial,sans-serif;
    font-size: 8pt;
    }
    
    .AdminMenuLink {
    background-color: transparent;
    font-family: tahoma,arial,sans-serif;
    font-weight: bold;
    font-size: 8pt;
    color: #FFCC99;
    text-decoration: none;
    }
    
    </STYLE>

    What I want is to make everything gradient, two colors to each to give it a 3d-ish type look.


    ANy help would be appreciated.

  2. #2
    Join Date
    Mar 2002
    Location
    Orlando, FL
    Posts
    12,200
    Use a gradient as a TD background image.

  3. #3
    .classname{
    filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#A5C7EF', startColorstr='#102C6B', gradientType='1');
    }

    this may not work on browsers other than IE6+

    hope this helps.

  4. #4
    Join Date
    Jan 2003
    Location
    Houston, TX - Originally from UK
    Posts
    697
    Quote Originally Posted by cenvo
    this may not work on browsers other than IE6+
    It definitely won't work on anything but IE. What versions it will work on I don't know.

    The best bet is to use a CSS background image. CSS gradients are not yet available, but are scheduled for CSS3 (whenever that is finished and is supported by the browser vendors).
    Kinkamono Internet Services - The Internet. Done Right.
    Dive In...

  5. #5
    Join Date
    Mar 2004
    Posts
    407
    IE has so many cools CSS features, but many do not work on other browsers making them next to obsolete.

    As for the gradient you need to make a one pixel thick image and put that as your background for your cell.
    Alvin

  6. #6
    Join Date
    Apr 2004
    Location
    Poland
    Posts
    7
    You can hardly call a 3-year old broswer with lack of many css2 features a modern one either. I'm not trying to start a flame, just putting things into porspective.

    Regards

  7. #7
    Join Date
    Jan 2003
    Location
    Houston, TX - Originally from UK
    Posts
    697
    Quote Originally Posted by Duncan Idaho
    You can hardly call a 3-year old broswer with lack of many css2 features a modern one either.
    Who did call it a modern browser? Point to your post?
    Kinkamono Internet Services - The Internet. Done Right.
    Dive In...

  8. #8
    Join Date
    Apr 2004
    Location
    Poland
    Posts
    7
    Well, saying that IE has so many cool features that make other broswers next to obsolete sounds like that... doesn't it?

  9. #9
    Join Date
    Jan 2003
    Location
    Houston, TX - Originally from UK
    Posts
    697
    I took that post to read that IE has so many "cool features" but they don't work on other browsers, making the features obsolete. At least I hope that was what was meant. Otherwise it's patently clear that person doesn't have a clue about CSS.
    Kinkamono Internet Services - The Internet. Done Right.
    Dive In...

  10. #10
    Join Date
    Apr 2004
    Location
    Poland
    Posts
    7
    Oh... you may be right. I'm sorry then if I misunderstood that.


    Regards

  11. #11
    Gradient effects are very easy to do with CSS.

    Create a gradient in Photoshop (or other imaging program) that is the height you need for your div. The width only needs to be about 5 pixels at the most, and you can probably get away with saving it as a GIF (just make sure the gradient is 256 colors or less if you don't want to lose anything - using Photoshop's "Save for Web" option allows you to check this). In your stylesheet, set the gradient to be the background for your div. Now, to make the gradient tile across the entire div, specify "repeat-x". To make the gradient tile up/down the div, specify "repeat-y". Below is some example code with our example div called "header" and the graphic called "headerbg.gif":

    #header {
    background-image: url(/images/headerbg.gif);
    background-repeat: repeat-x;
    width: 100%;
    height: 100px;

    This code makes the gradient tile horizontally across the div. Make sure you specify the height of the gradient in pixels when using repeat-x (in this case 100px), and the width as 100%. The graphic used in this code was 100px tall and 5px wide (to keep it very small - only 700 bytes), yet it tiles all the way across the div and looks like a solid gradient. Hope this helps!

  12. #12
    CSS support in Internet Explorer is generally horrible. Alvinks doesn't really know what he's saying.

    However, the CSS I just showed works fine in IE at least back to version 5.0. And of course it works perfectly in Mozilla, Firebird, Opera, etc., all of which have excellent CSS support.

Posting Permissions

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