Soften a colour border, maybe with a gradient, programmatically.
- by ProfK
I have a narrow header in corporate colour, bright red, with the content below on a just-off-white background. Ive tried softening the long line where these colours meet using border type divs with intermediate backgrounds, but I think I need the original type curved gradient 'area transitions'.
I could copy the 1024px wide, and too narrow (vertically), header gif from their web site, and chop it up for eight border images, but that seems clumsy, and I'm looking for something I can apply anywhere, without needing images. I am able to do round borders in the x-y plane, but I'm curious as to how I can apply a gradient to any chosen colour transition.
The extra divs I'm using as border elements above and below '#top-section' arose when I was toying with making many divs for one bordered element. This seemed the ultimate in border manipulation, sans code, but very tedious to spec in CSS and lay out a new border for each bordered element.
<div id="topsection">
<div style="float: right; width: 300px; padding-right: 5px;">
<div style="font-size: small; text-align: right;">
Provantage Media Management System</div>
<div style="font-size: x-small; text-align: right;">
<asp:LoginStatus ID="loginStatus" runat="server" LoginText="Log in" LogoutText="Log out" />
</div>
</div>
<span style="padding-left: 15px;">Main Menu</span><span id="content-title">
<asp:ContentPlaceHolder ID="titlePlaceHolder" runat="server">
</asp:ContentPlaceHolder>
</span>
<div style="background-color: white; height: 2px;">
</div>
<div style="background-color: white; height: 3px;"></div>
And the CSS:
#topsection
{
background-color: #EB2728;
color: white;
height: 35px;
font-size: large;
font-weight: bold;
}
