Soften a colour border, maybe with a gradient, programmatically.

Posted by ProfK on Stack Overflow See other posts from Stack Overflow or by ProfK
Published on 2010-05-07T04:50:37Z Indexed on 2010/05/07 4:58 UTC
Read the original article Hit count: 267

Filed under:
|
|

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

© Stack Overflow or respective owner

Related posts about JavaScript

Related posts about web-development