resizable gradient effect like msdn

windows

Guest
does anyone know how microsoft do that gradient effect on their website? (microsoft website (<!-- m --><a class="postlink" href="http://msdn.microsoft.com/">http://msdn.microsoft.com/</a><!-- m -->) )

if you resize your browser, the blue borders at the top and bottom of the page changes its gradient.

i think its quite neat, but a bit :confused: on how i would do it.ill be able to tell you, im giving it a quick look now and almost got it :)ok, here's the basic code:

<table cellpadding="0" cellspacing="0" width="100%" height="22" border="0">
<tr>
<td width="10%" style="filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FFFFFF', endColorStr='#98B2E6', gradientType='1')"></td>
</tr>
</table>

Im not sure how compatible this is with the various browsers though. But that is the code for it. :)ahh i thought it would be that microsoft gradient thing, as always its like a sly plug for ie, as i don't think it works on any other browser.

thanks for finding that out for me though ;)I brought it up in Mozilla 0.8, and it didn't work on the top. There was a gradient on the bottom, but it seemed to behave more like a background image, so they may be feeding a slightly different code to other browsers. I didn't feel like comparing the code though :p
 
Back
Top