Soften a colour border, maybe with a gradient, programmatically
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 want to reduce the contrast between red and white here, using a red-white gradient, but a 'curved' gradient, rather than linear.
Images on the way:
I could copy th开发者_Python百科e 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.
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 the example harsh border (image is not showing, available at http://thehashtable.com/?attachment_id=58):
alt text http://thehashtable.com/?attachment_id=58
Without using images, your options for producing 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 fashion, that will work in the set of browsers you probably need it to.
CSS-3 provides gradient drawing functions, but only the very latest browsers support them to any extent, and I don't believe any of them give you the full suite of options that CSS-3 specifies.
For a slightly more cross-browser friendly solution, you could fake the gradient using a CSS shadow, like this: 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>
That leaves you at the mercy of the browser's shadow-drawing 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 well-supported, is to use border-image: this allows you to specify a single image which the browser then stretches, repeats and positions according to coordinates you supply. Firefox 3.1+, Safari 4+ and Chrome support this. Examples of border images are a bit more involved to set up - instead, have a look at: http://www.css3.info/preview/border-image/
So - unfortunately, this means you'll probably need to use images, or change your design to something more easily achievable. I haven't seen your example, but it's probably not worth the hassle, in my opinion!
Good luck!
加载中,请稍侯......
精彩评论