In a quest to use something different for my sidebar titles I started looking at some of the options for creating those cool looking 3D style ribbons where the edges fold neatly on the outside of the container holding the text. There’s a bazillion examples of this and most of the tutorials I saw were leaning toward CSS3 to do all the work.The problem is… CSS3 just ain’t quite ready for prime-time since it’s not fully supported across all browsers and would consequently require even more code to make it work like it’s supposed to. So, I took the simple way out and instead of using the radius selectors that CSS3 provides (which aren’t supported in most versions of IE, if any) I created a three image method of creating the sidebar boxes.

So, the three images consist of:

1. the top including the ribbon
2. the repeatable middle section
3. the bottom

These were all created in Photoshop as one image then sliced against a transparent background and saved in PNG format. Pretty simple stuff.

Then it was time to create the container and divs that would hold the info. We’ll start with just the container div:

 

.ribbonBox {

 width: 190px;

 float: left;

 margin-bottom: 15px;

 }

 

Now, you can adjust everything to your dimensions but my sidebar is a little skinny and the main container div had to allow for some margins so it didn’t hit the left and right borders. The margin-bottom is there so I can stack the boxes on top of each other and there will be some space in between them. Now we do the 3 inner divs that hold the images:

 

.ribbonTop {

 width: 190px;

 background: transparent url('../images/ribbons_top.png') no-repeat;

 height: 52px;

 }

.ribbonTop h2 {

 color: #fff;

 font-weight: normal;

 font-size: 18px;

 padding: 15px 0 0 10px;

 }

.ribbonMid {

 width: 190px;

 background: transparent url('../images/ribbons_mid.png') repeat-y;

 float: left;

 }

.ribbonMid p {

 margin: 0 10px;

 }

.ribbonBot {

 width: 190px;

 background: transparent url('../images/ribbons_bot.png') no-repeat;

 height: 14px;

 float: left;

 }

 

And, last but not least, the HTML

    


Recall News::



Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan

        


	

Notice I also gave some formatting to the H2 title so it would display in the right location and look good against the color of the ribbon background.

The end result would produce a box like so:

The three pieces are as so (right click, Save As if you wish to use them:

By using repeat-y on the middle section it will automatically repeat downward as the content increases or decreases. Using this 3 image method cut out the need to have literally dozens of CSS3 statements and used about half the code to get the same effect. Going this route assured me that the look would be the same across browsers. As much as i’d like to be a ‘purist’ and try to do everything with strict code and no images, the world just isn’t quite ready for it.