Как управлять цветом списка окон?

Question

Я сделать GUI для HTML всплывающих окон, и это suppossed выглядеть как этот макете

Я сделал HTML, который отображает почти аналогичную точку зрения:

Но я потерял за то, как чтобы сделать затухающий кончик окон, где макет имеет синий цвет, исчезающий до более светлого нюанса. Возможно ли это с помощью HTML/CSS, когда это всплывающее окно, отображаемое в DIV? Не могли бы вы рассказать мне, как это сделать? Мой код теперь

 <table id="mainTable" border="1" class="tabell" cellspacing="5" cellpadding="2"> 
      <tr> 
      <!-- Placeholder for the form table --> 
      <td valign="top"> 
       <table id="formTable" border="1" class="tabell" cellspacing="2" cellpadding="2"> 
       <tr> 
        <td> 
        <b>Sök efter ansvarig</b> 
        </td> 
       </tr> 
       <tr> 
        <td>&nbsp;</td> 
       </tr> 
       <tr> 
        <td>Sök efter person, funktion, organisation, roll eller signatur med följande namn:</td> 
       </tr> 
       <tr> 
        <td> 
        <input type="text" class="textandlist" name="searchValue" size="40" /> 
        </td> 
       </tr> 
       <tr> 
        <td align="right"> 
        <input type="button" class="knapp" name="searchButton" id="searchButton" value="&nbsp;&nbsp;Sök&nbsp;&nbsp;" onclick="doSubmit('HandlaggareSearch','search')" /> 
        <input type="button" class="knapp" name="cancelButton" id="cancelButton" value="Avbryt" onclick="cancelHandlaggareDialog()" /> 
        <input type="button" class="knapp" name="showButton" id="showButton" value="Visa alla" onclick="doSubmit('HandlaggareSearch','showAll')" /> 
        </td> 
       </tr> 
       </table>      
      </td> 
      <!-- Placeholder for the result table --> 
      <td valign="top"><a href="javascript:void(0)" onclick="document.getElementById('popupD').style.display = 'none';" 
" align="right">Stäng</a> 

       <img src="images/spacer.gif" /> 
       <table id="headerTable" class="tabell" cellspacing="2" cellpadding="2" width="700"> 

       <tr> 
        <td colspan="5"> 
        <b>Sökningen gav inga träffar.</b> 
        </td> 
       </tr> 

       <tr> 
        <td colspan="5"> 
        <b>Resultat</b> 
        </td> 
       </tr> 
       <tr> 
        <td colspan="2"> 
        <span>Antal träffar: </span> 
        </td> 

        <td colspan="3" align="right"> 

        <a href="javascript:SearchHandlaggareShow('previous')"> 
        &lt;&lt; 

        - 

        </a> 

        [ 

        - 

        ] 

        <a href="javascript:SearchHandlaggareShow('next')"> 

        - 

        &gt;&gt; 
        </a> 

       </td> 

       </tr> 

      </table> 

      <div style="height: 220px; overflow: auto;" > 
       <table id="resultTable" class="tabell" cellspacing="2" cellpadding="2" width="700"> 
       <tr> 
        <th><a href="javascript:SearchHandlaggareSort('1')">Signatur</a></th> 
        <th><a href="javascript:SearchHandlaggareSort('2')">Namn</a></th> 
        <th><a href="javascript:SearchHandlaggareSort('3')">Enhet</a></th> 
        <th><a href="javascript:SearchHandlaggareSort('4')">Grupp</a></th> 
        <th><a href="javascript:SearchHandlaggareSort('5')">Roll</a></th> 
       </tr> 

       <tr class="bakgrund1" onmouseover="this.className='highlight'" onmouseout="this.className='bakgrund1'"> 

        <td></td> 
        <td></td> 
        <td></td> 
        <td></td> 
        <td></td> 
       </tr> 

       </table> 
      </div> 

      </td> 
     </tr> 
     </table> 

Спасибо за любые советы

Answer 1

http://jsfiddle.net/efortis/t6QsP/

<div class="horizontal-gradient"> Pandora - sok ... </div>​ 


.horizontal-gradient { 
    background: #1a2adb; /* Old browsers */ 
    background: -moz-linear-gradient(left, #1a2adb 0%, #a1e6ed 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#1a2adb), color-stop(100%,#a1e6ed)); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(left, #1a2adb 0%,#a1e6ed 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(left, #1a2adb 0%,#a1e6ed 100%); /* Opera 11.10+ */ 
    background: -ms-linear-gradient(left, #1a2adb 0%,#a1e6ed 100%); /* IE10+ */ 
    background: linear-gradient(left, #1a2adb 0%,#a1e6ed 100%); /* W3C */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1a2adb', endColorstr='#a1e6ed',GradientType=1); /* IE6-9 */ 
    color: white; 
} 

Сделано с

http://www.colorzilla.com/gradient-editor/