BlueBoden's BorderTechnique With background-Images

Published by BlueBoden on 11. July 2008.

This example is based on the original BlueBoden's BorderTechnique Example.

I mainly made this page to show how to use my Technique with background-images, and how to create rounded corners in css based layouts. This method is one of the best ways to create rounded corners, as no hacks are used. I also toke advantage of CSS Sprites to lower the http-requests, and decrease page load-time.

This is a CSS Position based layout. If you like this Technique, be sure to visit www.brugbart.com for more, there will be a number of Tutorials and Articles posted, and listed in the Tutorials section.

It should be said that it is possible to use this technique in complex percentage based multi-column layouts, this technique is used on Brugbart. In practice you would want to apply a min-width and you may consider applying a max-width. Keep in mind my main goal was to create a ContentBox with rich borders, which allowed the content to determine the length, not to create a percentage based layout, nevertheless i did convert it into percentages later.

The web grapichs used as background images, I.E. The CSS Sprites BG_Spirits2.png and BG_SpiritsRTB2.png can be freely used in your own layouts, both the pngs are using Alpha Transparency, which means they should fit onto a lot of different backgrounds. Although i dont require you to refer to me or Brugbart in any way, it would still be nice if you linked back.

BG_SpiritsRTB2.png BG_Spirits2.png

The SourceCode

Published by BlueBoden on 9. november 2007.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>BlueBoden's BorderTechnique</title>
<style type="text/css">
body, .sar_01, .sar_02, .sar_03 {
  /* the sar classes need this bg applied to fix a bg shadow-overlap */
  background: #72c1ca;
}
body {
  color: #0d5288;
  margin: 1em 0 10em 0;
  padding: 0 1em 0 1em; /* Required to fix a issue where the browser would cut the borders when resized, the alternative is to place the borders inside CenterContentBox rather then outside. */
}
.CenterContentBox {
  /* This is the actual BorderBox, it also defines the width of the content. */
  width: 75%; /* This is limited by the min and max-widths */
  margin: 3em auto;
  max-width: 1200px;
  min-width: 800px;
}
.SarCenterContent {
  position: relative; /* Position Relative is used to anable absolute positioning inside a container, in this case SarCenterContent. */
  width: 100%;
  margin: 0 auto; /* Used to center the container, i'm not sure its really used for anything at this point. */
  padding-bottom: 1em;
  text-align: left; /* Since ealier versions of IE sometimes required the text-align: center; we reset the text alignment. */
}
.sar_01 {
 position: relative;
 width: 100%;
 height: 48px;
 background-image: url("/saek/mappen-billeder/BG_SpiritsRTB2.png");
 background-position: 0px 48px;
 overflow: visible;
 z-index: 1;
}
.sar_02 {
 position: absolute;
 left: -11px;
 width: 27px;
 height: 48px;
 background-image: url("/saek/mappen-billeder/BG_Spirits2.png");
 background-position: 0px -24px;
 overflow: visible;
}
.sar_03 {
 position: absolute;
 right: -18px;
 width: 35px;
 height: 48px;
 background-image: url("/saek/mappen-billeder/BG_Spirits2.png");
 background-position: -27px -24px;
 overflow: visible;
}
.sar_04 {
 position: absolute;
 left: -11px;
 width: 11px;
 height: 100%;
 background-image: url("/saek/mappen-billeder/BG_Spirits2.png");
 background-position: -116px -72px;
 overflow: visible;
}
.sar_05 {
 position: absolute;
 right: -18px;
 width: 18px;
 height: 100%;
 background-image: url("/saek/mappen-billeder/BG_Spirits2.png");
 background-position: -127px -72px;
 overflow: visible;
}
.sar_06 {
 position: relative;
 width: 100%;
 height: 24px;
 background-image: url("/saek/mappen-billeder/BG_SpiritsRTB2.png");
 overflow: visible;
}
.sar_07 {
 position: absolute;
 left: -11px;
 width: 27px;
 height: 24px;
 background-image: url("/saek/mappen-billeder/BG_Spirits2.png");
 background-position: -62px -24px;
 overflow: visible;
}
.sar_08 {
 position: absolute;
 right: -18px;
 width: 27px;
 height: 24px;
 background-image: url("/saek/mappen-billeder/BG_Spirits2.png");
 background-position: -89px -24px;
 overflow: visible;
}
.Decoration_01 {
 /* Light on the Top in the left border. */
 position: absolute;
 top: 0px;
 left: 0px;
 width: 11px;
 height: 50px;
 background-image: url("/saek/mappen-billeder/BG_Spirits2.png");
 background-position: -145px 0px;
}
.Decoration_02 {
/* Light on the Bottom in the left border. */
 position: absolute;
 bottom: 0px;
 left: 0px;
 width: 11px;
 height: 50px;
 background-image: url("/saek/mappen-billeder/BG_Spirits2.png");
 background-position: -156px 50px;
}
.Decoration_01right {
 /* Light on the Top in the right border. */
 position: absolute;
 top: 0px;
 right: 7px;
 width: 11px;
 height: 50px;
 background-image: url("/saek/mappen-billeder/BG_Spirits2.png");
 background-position: -145px 0px;
}
.Decoration_02right {
 /* Light on the Bottom in the right border. */
 position: absolute;
 bottom: 0px;
 right: 7px;
 width: 11px;
 height: 50px;
 background-image: url("/saek/mappen-billeder/BG_Spirits2.png");
 background-position: -156px 50px;
}
.Decoration_05 {
 /* Decoration on top border */
 position: absolute;
 top: 0px;
 right: 10em;
 width: 2px;
 height: 40px;
 background-image: url("/saek/mappen-billeder/BG_Spirits2.png");
 background-position: -167px 0px;
}
p {
  margin: 1em 1em 0 1em;
}
h1 {
  font-weight: bold;
  font-size: 2em;
  margin: 1em 0 0 0;
}
h2 {
  font-weight: bold;
  font-size: 1.5em;
  margin: 1em 0 0 0;
}
.indent {
  margin: 0 1em 0 2em;
  font-size: 0.9em;
  font-style: italic;
}
</style>
</head>
<body>

   <div class="CenterContentBox">
    <div class="sar_06">
     <div class="sar_07"></div>
     <div class="sar_08"></div>
    </div>
    <div class="SarCenterContent">
     <div class="sar_04">
      <div class="Decoration_01"></div>
      <div class="Decoration_02"></div>
     </div>
     <div class="sar_05">
      <div class="Decoration_01right"></div>
      <div class="Decoration_02right"></div>
     </div>
        <!-- ContentGoesHere Start -->
     <h1>Headline 1</h1>
     <p class="indent">Description Paragraph</p>
     <p>Paragraph</p>
     <h2>Headline 2</h2>
     <p class="indent">Description Paragraph</p>
     <p>Paragraph</p>
        <!-- ContentGoesHere End -->
    </div>
     <div class="sar_01">
      <div class="sar_02"></div>
      <div class="sar_03"></div>
     </div>
    </div>

</body>
</html>

All Examples are Copyrighted by Brugbart Webdesign, and may not be copied whitout permission.