Gradients in CSS Branding of SharePoint Sites
Many of the gradients that you see in the default SharePoint branding (that dreaded blue and orange that everyone wants to change) are created by using an image that is the appropriate height and one pixel wide. The images are used as the background-image in the various CSS classes with background-repeat set to repeat-x. This is nice because the image will be repeated horizontally for as many pixels as are required, regardless of the width of the object.
If you can reasonably rely on your users having some flavor if Internet Explorer (Some of these tricks may work just fine in other browsers, but I haven’t done any testing other than with IE.), there are some nice tricks outlined in this article:
Instead of using images to create your gradients, you can use DXImageTransform.Microsoft.gradient in your CSS in a filter, like this:
.my-css-class {
background-color:#596E9E;
filter: progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#596E9E, endColorstr=#000000);
}
What this does is to dynamically create the gradient, going from the start color to the end color over as many pixels as there are in your object. This means that you don’t have to worry about the size of objects ahead of time; the filter will adjust as needed.
I would still recommend setting a background color (as above) to handle the cases where the filter may not display correctly. I have run into some areas in the default master page where this is the case, but I haven’t been able to isolate the exact reason. I suspect it may be caused by some of the scripts that run on various controls.