Question

I’m making a GUI for an HTML popup and it’s suppossed to look like this mockup

I’ve made HTML that displays a nearly similar view:

But I’m lost for how to make the fading tip of the windows where the mockup has a blue color fading to a lighter nuance. Is that even possible with HTML /CSS when this is a popup that is displayed within a DIV? Could you tell me how? My code now is

        <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>

Thanks for any advice

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;
}

​

Made with

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