empire-of-the-crystal

Want a FREE Breaking Bad T-Shirt?

GeekZenith is giving away 3 entirely awesome Breaking Bad t-shirts! Want one? Then head over to The Great GeekZenith Give Away Page and follow the 3 easy steps to enter.

How to Make an Awesome Ribbon Banner

I have a confession to make: I’m already working on GeekZenith 2.0.

I’m a perfectionist, what can I say? It comes in as both a great advantage and disadvantage in the wonderful world of web design. On the one hand, your websites mostly look pretty bitchin once completed, on the other hand you obsess over minor details so much your completion timetable is entirely smashed and more often than not your project just doesn’t get done.

So why am I telling you all this? Well, in designing the new look GeekZenith I came across a pretty cool, yet unbelievably simple, way to create an awesome looking ribbon banner and I just had to share it.

If you’re sat there, in front of your computron’s thinking, ribbon banner? WTF are you talking about? Well cast your eyes over exactly what I mean:

Ribbon Banner Example Image

Of course, the idea of a ribbon banner is to cast the illusion that the banner “folds” over the side of a containing div and whilst on the face of it, it may appear hard work, but when you look at the mechanics of how it works you realise it’s really not.

That banner has only one small image (the actual fold) the rest is created with CSS and good colour blending (if I do say so myself).

The first thing we’re going to do is decide on a colour scheme. I decided to blend a darker shade of orange with a lighter shade of orange. I think any colour can work for this, but I recommend using a darker shade to highlight the edgers of the banner and using the lighter shade inside to make the banner pop.

Once your colour scheme has been chosen, it’s time to make the fold image that will appear on the bottom left hand of the banner, which make it look like the banner is folding onto the page. The size of the image all depends on how large you want your fold to be, however, you will only be using half of the image so please bear that in mind.

First of all, open up Photoshop (or whatever image creating software you may use) and create a new image. The size of the image all depends on how big yo require your fold to be, but the one I used was 20 pixels by 20 pixels and the background transparent (this is important).

Ribbon Banner - Step 1

Next, select the Polygonal Lasso Tool from the tool menu.

Ribbon Banner - Step 1.1

Direct the tool to the top left hand corner of the image, click once to activate the tool and drag the consequent line to the bottom right hand corner of the image, keeping your finger on the shift key to ensure the line is perfectly straight. When satisfied, click again to anchor the point and establish a line. From here, direct the tool directly vertical (keeping your finger on the shift key again) and click to anchor the point in the top right hand corner of the image. Finally, drag the tool horizontal back to the starting point of the selection and in doing so a small circle should appear next to the tool. Once you see the circle, click again to establish the connection and you now see that one half of your image has now been selected.

Ribbon Banner - Step 2

Now, select your colour of choice in the colour palette and fill the selection. Save the image for web, select the PNG-24 option making sure the transparency is switched on and save the image.

Now, we must create the accompanying code. The bulk of the ribbon banner is made up of CSS and in order to create the effect we’re looking for, we need two major classes – one for the main face of the banner, the other to hold the fold image. We’ll call the first one postHeader and the second postFold

In order to fully show you the ribbon banner, I’ve created a basic web page with a basic content container which our ribbon banner will sit inside.

I’ll name the main page index.html and rather imaginatively, I’m calling the CSS page css.css, here’s the code:


body {
margin: 0;
background-color: #333;
font-family: arial;
font-size: 14px;
}

.container {
width: 750px;
height: 600px;
display: block;
margin: 0 auto;
background-color: #CCC;
border-left: 2px solid #666;
border-right: 2px solid #666;
}

Now we’ll build the main panel for the ribbon banner. In the CSS file:


.postHeader {
display: block;
float: left;
margin-left: -20px;
background-color: #ff9933;
padding: 10px;
padding-left: 25px;
padding-right: 25px;
margin-top: 10px;
position: relative;
border: 1px solid #cd4b0a;
}

The important parts of the above code is the CSS position function and the CSS margin-left attribute. The position tag will help us position the banner face with the banner fold. The margin-left CSS function for this class is set at a minus value in order for the banner to overlap the edge of the container div just enough to line up with the fold image. You may need to tweak your margin-left value in order to accommodate a larger or smaller fold image.

Next up, we’ll create a class for the header text. I’ve decided to use white for the text colour, but because the background colour of the ribbon banner is also light, I decided to add a little drop shadow to the header text using the CSS text-shadow function. It’s the first time I ever used the text-shadow function and I must admit, it’s pretty cool little trick to have in your arsenal and for the ribbon banner, it’s just gave the text that little edge it needed. I’ve wrapped the header text in H2 tags and styled it accordingly:


.postHeader h2 {
margin: 0;
color: #FFF;
text-shadow: 1px 1px 1px #666;
font-size: 18px;
}

Now it’s time to create the CSS holder for the fold image, here’s the code:


.postFold {
width: 20px;
height: 20px;
display: block;
background-image: url(banner.png);
bottom: -20px;
position: absolute;
}

The most important aspect of the postFold CSS is the position function. The postFold position is set to absolute to accommodate the postHeader tag. Put it all together, you got:

css.css


body {
margin: 0;
background-color: #333;
font-family: arial;
font-size: 14px;
}

.container {
width: 750px;
height: 600px;
display: block;
margin: 0 auto;
background-color: #CCC;
border-left: 2px solid #666;
border-right: 2px solid #666;
}

.postHeader {
display: block;
float: left;
margin-left: -20px;
background-color: #ff9933;
padding: 10px;
padding-left: 25px;
padding-right: 25px;
margin-top: 10px;
position: relative;
border: 1px solid #cd4b0a;
}

.postHeader h2 {
margin: 0;
color: #FFF;
text-shadow: 1px 1px 1px #666;
font-size: 18px;
}

.postFold {
width: 20px;
height: 20px;
display: block;
background-image: url(banner.png);
left: -1px;
bottom: -20px;
position: absolute;
}

Take a look at the finished product here and give it a shot yourself. If you have any questions, just hit me up in the comment section below!

No related posts.

5 Responses to How to Make an Awesome Ribbon Banner

  1. j_fradique says:

    It doesn’t work in IE – tweaks, those horrible tweaks in IE are necessary (png doesn’t show, text-shadow not supported…)

    Overall I liked your explaination and I must say it’s pretty damn easy to create it according to your code.

    Thanks for sharing it :-D

  2. The Master of Awesomeness says:

    Thank you kindly for your comment.

    Hopefully, tweaks such as this won’t be necessary for much longer, but it’s still a useful trick to know.

  3. Richard says:

    j_fradique,

    You can get some CSS3 stuff to work in IE7 and IE8 using PIE (css3pie.com).
    Box shadows, rounded corners and pngs will work – plus some other stuff.
    Not text shadows though.

  4. Richard says:

    Also…
    I tried this ribbon in IE7 and IE8 and the float wasn’t working.
    But after I added this doctype declaration it was!

    An XHTML 1.0 Strict standard template

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>