Have Geek Brain

Soften color border, possibly with a gradient, programmatically

I have a narrow headline in corporate color, bright red, with the content below on a plain white background. Ive tried to soften the long line where these colors meet by using border divs with intermediate backgrounds, but I think I need the original "area transitions" gradient curves type. I want to reduce the contrast between red and white here using a red to white gradient, but a "curved" gradient, not a linear one.

Images along the way:

I could copy the 1024px wide and too narrow (vertical) gif header from my website and crop it for eight border images, but that seems awkward and I'm looking for something I can apply anywhere without images. I can make round borders in the xy plane, but I am curious how I can apply a gradient to any color transition I select.

The extra divs I use as border elements above and below the "# top-section" came up when I played with a lot of divs for one granite element. This seemed to be the ultimate in border manipulation, no code, but very tedious to spec in CSS and lay out a new border for each border element.

HTML:

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

And an example of a hard border (no image is displayed, available at http://thehashtable.com/?attachment_id=58 ):

alt text http://thehashtable.com/?attachment_id=58

+2


a source to share


1 answer


Without using images, your options for creating gradients are very limited - you can't yet "programmatically blur the border between red and white with a gradient, without using images" in any reliable way that will work across the set of browsers you probably need to do this. ...

CSS-3 provides gradient drawing functionality, but only the most recent browsers support them to any extent, and I don't believe any of them will give you the full range of options that CSS-3 indicates.

For a slightly more browser friendly solution, you can fake the gradient using a CSS shadow like: http://www.spookandpuff.com/examples/fakeGradientFill.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>Fake gradient fill</title>
    <style type="text/css" media="screen">
      * {margin:0;padding:0;}
     body {margin:2em;padding:0;}
     #header,
     #content {
       background-color:#992916;
       color:#FFF;
       margin:0;
       padding:1em;
     }

     #content .liner {
       color:#222;
       padding:1em;
       background-color:#F4F4F4;
       box-shadow:0 0 1.5em #F4F4F4;
       -webkit-box-shadow:0 0 1.5em #F4F4F4;
       -moz-box-shadow:0 0 1.5em #F4F4F4;
     }
    </style>
</head>

<body>
  <div id="header">
    <h1>Header content</h1>
  </div>
  <div id="content">
    <div class="liner">
      <h2>Body content</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
  </div>
</body>
</html>


This leaves you at the mercy of the browser shadow painting technique (you don't see a smooth transition in any browser I've tested). Firefox 3+, Safari 4+, Chrome 1+, and some newer versions of Opera support this effect.

Another option, again not very well used, is to use border-image: this allows you to specify a single image, which the browser then stretches, repeats, and positions according to your coordinates. Firefox 3.1+, Safari 4+, and Chrome support this. Examples of border images are a little more complex to customize - take a look at: http://www.css3.info/preview/border-image/ instead

So, unfortunately, this means that you may have to use images or change your design to something more easily achievable. I haven't seen your example, but in my opinion it's probably not worth the hassle!

Good luck!

+1


a source






More articles:


All Articles