Cross browser transparent gradient using SPAN tags


I want a cross browser gradient bar that uses JS and CSS.

I want it to be 22 px high and 100 pix wide.  It should be red on the right and transparent on the left.

My idea is to create 100 span tags with JavaScript, each one more transparent than the one before it.

The first one should look like this:

<span height="22" width="1" style="
      opacity: 0.99;
      background-color: #FF0000
><img src="trans.gif" height="22" width="1"></span>

And the last one like this:

<span height="22" width="1" style="
      opacity: 0.01;
      background-color: #FF0000
><img src="trans.gif" height="22" width="1"></span>

So the short script should create 100 lines.

Any ideas how to effectively do this?

LVL 16
Who is Participating?
maclemaConnect With a Mentor Commented:
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
function pad(num)
      var str = ""+num;
      if ( str.length == 1 )
            str = "0" + str;
      return str;

function createFade() {
      var startOp = 99;
      var endOp = 01;
      var allHtml = "";
      for ( var i=startOp; i>=endOp; i-- )
            var op = pad(i);
            var html = '<span height="22" width="1" style="width: 1px; height: 22px; filter:alpha(Opacity=' + op + '); opacity: 0.' + op + '; -moz-opacity:0.' + op + '; background-color: #FF0000;">&nbsp;</span>';
            allHtml += html;
      document.getElementById("putHere").innerHTML = allHtml;

window.onload = createFade;

<div id="putHere"></div>
P.S. You will need to replace '&nbsp;' with your transparent gif >> '<img src="trans.gif" height="22" width="1">'
Just a curious question... Why not just create a PNG with alpha-channel? (For IE just use the AlphaImageLoader filter. Much faster & less work to do.)
hankknightAuthor Commented:
Thanks, maclema.

KennyTM, good question.  I used red as the colour in my question to simplify the answer.  However, the actual colour will be dynamically created on the fly with JavaScript.   So a PNG is not an option, unless I were to dynamically create a PNG on the fly.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.