...

View Full Version : gradient / fading css style



crmpicco
08-17-2005, 01:51 PM
is there a way to put a style on a div or table that is similar to the header on the MSDN site
http://msdn.microsoft.com/
..
you will notice the blue bar going from light blue to dark blue (left -> right)

Picco

Tristan Gray
08-17-2005, 02:07 PM
HTML:

<div id="topbar">
<img src="gradient.gif"/>
</div>

CSS:

#topbar {
width: 99.5%;
}

#topbar img {
width: 100%;
}


Basically you section off the area you want to use the gradient on using a div. Once you have it placed where you want it you simply add the image to that div and use css to ensure that it stretches to take up the entire page. Gradients don't degrade in quality much when they are stretched and so you don't have to worry. Only clearly defined edges suffer from minor resizing usually.

You could use the image as a background in the div which would be preferable but then you cannot ensure that it will fill the whole length of the screen at different resolutions.

From there if you want to add some text over the gradient or a logo you can do it one of two ways.

The first way is to create another div and position it to be over top of where your gradient is and then save your text or logo with a transparent background in a .gif or .png format. This is a good solution except that IE does not support .png transparency well so this could end up looking ugly. GIFs will work though. Another problem is that chances are that the logo will not appear in the exact same place cross browser but will be shifted slightly.

The second way is to do as I believe they did and notice that they faded from pure white to blue? This way they can add a white background to whatever logo they intend to use and then just lay it on top with another div. This is a good idea too if you fear transparency.

The benefit of using these techniques is that unlike having your text or logo on the gradient image the logo quality will not degrade as the gradient is resized to fit larger browser windows. This means that you can use a fluid layout without fear of getting pixel distortion on your text. Hopefully this has helped.

mcdougals4all
08-17-2005, 05:20 PM
is there a way to put a style on a div or table that is similar to the header on the MSDN site
In this case, they're actually using IE's proprietary filters to create the effect. View the code below in IE and you'll notice that the gradient effect resizes with the window.


<table cellpadding="0" cellspacing="0" width="100%" border="0">
<tr>
<td width="100%">
<table cellpadding="0" cellspacing="0" width="100%" height="22" border="0">
<tr>
<td bgcolor="#FFFFFF"></td>
<td width="50%" style="filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FFFFFF', endColorStr='#98B2E6', gradientType='1')"></td>
<td width="50%" style="filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#98B2E6', endColorStr='#3568CC', gradientType='1')"></td>
</tr>
</table>
</td>
<td bgcolor="#3568CC" height="22" nowrap="">
&nbsp;
</td>
</tr>
<tr valign="top">
<td width="100%">
<table cellpadding="0" cellspacing="0" width="100%" height="42" border="0" style="height: expression(parentElement.offsetHeight)">
<tr valign="top">
<td bgcolor="FFFFFF">
<a href="#"><img src="" width="225" height="42" alt="" title="" border="0" /></a>
</td>
<td width="100%" style="filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FFFFFF', endColorStr='#6799FF', gradientType='1')"></td>
</tr>
</table>
</td>
<td bgcolor="#6799FF">
&nbsp;
</td>
</tr>
</table>

Tristan Gray
08-17-2005, 05:23 PM
Oh, that's neat, does it work cross-browser? I'd probably just use an image anyway. heh.

mcdougals4all
08-17-2005, 05:38 PM
No, it's not cross-browser friendly. :(

If you view the MSDN home page in Firefox the basic look is the same, but the gradient doesn't resize with the page. Looks like they are just serving background images to everything other than IE.

mrruben5
08-17-2005, 05:44 PM
It's propiarety. Just use a background imagee when you have to use a background image for other browsers. Generating the gradient takes up more time in IE anyway.

Tristan Gray
08-17-2005, 06:39 PM
Yeah, I figured it was probably IE only and probably wouldn't load any faster than a medium quality image. Gradients are neat, now all we need is IE to catch up with .png transparency and it will be gravy. I love being able to put a transparent logo over gradients and other patterns on webpages.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum