css border shades without images
Its a very simple css code, and creat a shaded like affect using multiple borders. It has 7 borders with blending shades.
<html>
<head>
<style>
html,body{ margin:0; padding:0; text-align:center; height:100%;}
#sh1{ margin:0 auto; width:800px; border-left:1px solid #fdfdfd; border-right:1px solid #fdfdfd;text-align:left; height:100%;_margin-right:-3px; }
#sh2{ border-left:1px solid #f8f8f8;border-right:1px solid #f8f8f8;height:100%}
#sh3{border-left:1px solid #f1f1f1;border-right:1px solid #f1f1f1; height:100%}
#sh4{border-left:1px solid #e7e7e7;border-right:1px solid #e7e7e7;height:100%}
#sh5{border-left:1px solid #dadada;border-right:1px solid #dadada; height:100%}
#sh6{border-left:1px solid #cacaca;border-right:1px solid #cacaca;height:100%}
#sh7{border-left:1px solid #eaeaea;border-right:1px solid #eaeaea;height:100%}
</style>
</head>
<body>
<div id=”sh1″>
<div id=”sh2″>
<div id=”sh3″>
<div id=”sh4″>
<div id=”sh5″>
<div id=”sh6″>
<div id=”sh7″>
Your Content goes here..<br />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
The advantage of using this method over using images is that you can easily change the width of your site without changing the background image.
May 4th, 2008 04:40
Neat Trick… the Demo doesn’t work on Safari… you may want to fix that.
May 7th, 2008 02:04
That is really cool, I may have to keep this in mind to try sometime.
July 25th, 2008 01:45
The code as is above does not work, however, the demo code does work.
October 22nd, 2008 19:40
isn;t this is a case of “divitis”??