ansaurus

Question

Creating a variable-width gradiant fill in CSS

Answer 1

+2 A:

Do the gradient as an image in GIMP (one pixel high) and see http://www.cssplay.co.uk/layouts/background.html

MarkusQ 2009-02-27 18:34:43

Answer 2

+1 A:

There is no pure-CSS way of doing that but one solution using CSS is to make a background-image of sufficient width for the largest screen width you could have and make it stretch to the current browser width.

Another way if it's all the same color is to make a background-image in GIF that is more and more transparent and set a background-color of your choice.

See this or this.

lpfavreau 2009-02-27 18:36:08

Answer 3

+1 A:

Here is a way to do it with no images. You can consider this to be a hack, but it gets the job done, in a way. Adjust the number of steps in the gradient as needed. If you want it to scale automatically to fill the window, use more <b> elements and don't use the border as one of the gradient steps. Then size the <b> elements using percentage widths. You can even generate the gradient using Javascript if you want to keep the download size small.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
<html>
  <head>
    <title></title>
    <style type="text/css">
    .grad b {
       display: block;
       float: left;
       width: 16px;
       height: 100%;
       border-left-width: 16px;
       border-right-width: 16px;
       border-left-style: solid;
       border-right-style: solid;
       border-left-color: #FF0000;
       background-color: #EE0011;
       border-right-color: #DD0022;
    }
    .grad b+b {
       border-left-color: #CC0033;
       background-color: #BB0044;
       border-right-color: #AA0055;
    }
    .grad b+b+b {
       border-left-color: #990066;
       background-color: #880077;
       border-right-color: #770088;
    }
    .grad b+b+b+b {
       border-left-color: #660099;
       background-color: #5500AA;
       border-right-color: #4400BB;
    }
    .grad b+b+b+b+b {
       border-left-color: #3300CC;
       background-color: #2200DD;
       border-right-color: #1100EE;
    }
    .grad b+b+b+b+b+b {
      border: none;
      background-color: #0000FF;
    }
    .grad {
      float: left;
      font-size: 100%;
      height: 30px;
    }
    </style>
  </head>
  <body>
    <div class="grad">
      <b></b>
      <b></b>
      <b></b>
      <b></b>
      <b></b>
      <b></b>
    </div>
  </body>
</html>

Mr. Shiny and New 2009-02-27 19:15:11

ansaurus

tags:

views:

answers:

Creating a variable-width gradiant fill in CSS

related questions