How to Create a Modern Ribbon Banner Navigation Bar with Pure HTML/CSS3

As CSS3 becomes more robust and is more widely supported, the options for fun modern design elements that can be created without graphics are virtually limitless! For a recent project, I decided to see if I could create a centered ribbon banner with pure CSS3. This tutorial will walk you through how it was done.

As it turns out, it’s actually quite easy, using only simple, semantic HTML and some CSS3 trickery thanks to the magic of the the border-width property. The only caveat: As with all new CSS3 techniques, it can act a bit wonky in some IE browsers… we’ll address that at the end of the tutorial.

Here’s how:

Step 01: The Navigation Links

We want to create a navigation link bar, so we’re going to begin with a simple unordered list [ul] with links inside [a]. This is one of the most basic building blocks of markup; good for creating lists of elements to be styled in a similar way like we’re going to do here:

The code:

<!-- the navigation links -->
   <ul id="navigation">
      <li><a href="#">link 1</a></li>
      <li><a href="#">link 2</a></li>
      <li><a href="#">link 3</a></li>
      <li><a href="#">link 4</a></li>
   </ul>

We want the links to float horizontally across the page, so we’ll add the following styles:

First, we want to remove the bullet styling from the list-items, and make them float to the left of each other, and add a bit of space between them.

#navigation li {
        list-style: none;
        display: block;
        float: left;
        margin: 1em;
}

Next, we’ll add a bit of text-shadow, remove the link underlines, and add the text color and size.

#navigation li a {
        text-shadow: 0 2px 1px rgba(0,0,0,0.5);
        display: block;
        text-decoration: none;
        color: #f0f0f0;
        font-size: 1.6em;
        margin: 0 .5em;
}

I also like to add a bit of soft animation effects on hover:

#navigation li a:hover {
        margin-top: 2px;
}

To add the stars, I’ve placed an HTML entity ✭ (which looks like this ✭) inside of each link. This is purely decorative, and not needed for the functionality.

At this point, we already have a nice usable navigation link section that we could add into a page. But we’re going to keep going to create a nice ribbon to put these links inside of.

Step 02: The Ribbon Banner

The border-width technique that we’re going to use does require that we add 4 extra elements to the markup. While it’s not ideal to add extraneous elements, in the long-run it’s probably still more efficient than loading up extra graphics, and we’ll keep things as simple as possible.

First, we’ll create a container element around the links. This will allow us to set a width to keep all the banner elements together:

<div id="navigation_container">
<!-- the navigation links -->
   <ul id="navigation">
      <li><a href="#">&#10029; link 1</a></li>
      <li><a href="#">&#10029; link 2</a></li>
      <li><a href="#">&#10029; link 3</a></li>
      <li><a href="#">&#10029; link 4</a></li>
   </ul>
<!-- end container -->
</div>

We’ll add the following style to set the width and center the container element:

#navigation_container {
   margin: 0 auto;
   width: 960px;
}

Next, we’ll add the rectangle that will be the body section of the ribbon:

<div id="navigation_container">
<!-- the ribbon body -->
      <div class="rectangle">
<!-- the navigation links -->
   <ul id="navigation">
      <li><a href="#">link 1</a></li>
      <li><a href="#">link 2</a></li>
      <li><a href="#">link 3</a></li>
      <li><a href="#">link 4</a></li>
   </ul>
<!-- end container -->
</div>

We’ll add the following styles to create the ribbon body background. We’re setting a z-index of 500 because the rectangle needs to be stacked on top of the triangles that we’ll create next. I’m adding both -moz-box-shadow and box-shadow to account for Firefox and -webkit/IE9 respectively:

.rectangle {
   background: #e5592e;
   height: 62px;
   position: relative;
   -moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
   box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   border-radius: 3px;
   z-index: 500; /* the stack order: foreground */
   margin: 3em 0;
}

Next, we’ll add the triangles to the edges of the ribbon:

<div id="navigation_container">
<!-- the left side of the fork effect -->
   <div class="l-triangle-top"></div>
   <div class="l-triangle-bottom"></div>
<!-- the ribbon body -->
      <div class="rectangle">
<!-- the navigation links -->
   <ul id="navigation">
      <li><a href="#">link 1</a></li>
      <li><a href="#">link 2</a></li>
      <li><a href="#">link 3</a></li>
      <li><a href="#">link 4</a></li>
   </ul>
<!-- end the ribbon body -->
   </div>
<!-- the right side of the fork effect -->
         <div class="r-triangle-top"></div>
         <div class="r-triangle-bottom"></div>
<!-- end container -->
</div>

Finally, we’ll add some border-width magic. The key to this is setting a border-color of transparent for each side of the element except for the bottom (for the top triangles) and top (for the bottom triangles). Then, we set a border-width of 50px. This creates an isosceles triangle, which we will then position behind the main body of the ribbon:

.l-triangle-top {
   border-color: #d9542b transparent transparent;
   border-style:solid;
   border-width:50px;
   height:0px;
   width:0px;
   position: relative;
   float: left;
   top: 1px;
   left: -50px;
}
.l-triangle-bottom {
   border-color: transparent transparent #d9542b;
   border-style:solid;
   border-width:50px;
   height:0px;
   width:0px;
   position: relative;
   float: left;
   top: -40px;
   left: -150px;
}

We’ll do the same for the right side:

.r-triangle-top {
   border-color: #d9542b transparent transparent;
   border-style:solid;
   border-width:50px;
   height:0px;
   width:0px;
   position: relative;
   float: right;
   right: -45px;
   top: -107px;
}
.r-triangle-bottom {
   border-color: transparent transparent #d9542b;
   border-style:solid;
   border-width:50px;
   height:0px;
   width:0px;
   position: relative;
   float: right;
   top: -149px;
   right: -145px;
}

And we’re done! This will render perfectly in Firefox and Webkit browsers. IE is notoriously bad at using these CSS3 properties, so it won’t render perfectly there, but we’ll do our best to get it pretty close using a couple custom stylesheets.

For IE8 and IE9, we’ll add some custom positioning rules through the “ie.css” stylesheet:

.l-triangle-top {
	left: 150px;
	top: 50px;
}
.l-triangle-bottom {
	left: 50px;
	top: -12px;
}
.r-triangle-top {}
.r-triangle-bottom {
	top: -169px;
}

Just to be on the safe side (and since we believe in progressive enhancement), we’ll also add a fix for IE7, which can be placed in either the head section of your page or in a separate IE7 stylesheet. My choice of a fix is to simply hide the triangles in browsers lower than IE8. The browser-width property is supported in IE7, but the spacing will be a bit off. It’s up to you whether you’d like to spend the extra time re-positioning the elements in IE7:

<!--[if lt ie8]>
.r-triangle-bottom,
.r-triangle-top,
.l-triangle-bottom,
.l-triangle-top {
   display: none;
}
<![endif]-->

Wrapping It Up

The background images are just for fun – you can add your own and build around this document… or just grab everything above this and drop it into your own design. But, in the interest of being comprehensive, here’s the CSS that’s adding in those images:

html{
background: #77d5fb url('bottom_bg.jpg') bottom center no-repeat;
}
body{
background: transparent url('top_bg.png') top center no-repeat;
width: 100%;
height: 100%;
margin: 0 0;
}

Credits: The images are from iStockPhoto – we can’t distribute the bottom island image with the demo, but you can grab it for yourself here.

That’s It!

Hope you guys enjoyed this one! Remember that this is a fairly new set of techniques… so if your goal is 100% stability on all browsers known to man, there are more stable ways of accomplishing this using basic images for the background. Leave your comments and questions below ;)

Read More about creating a ribbon or folding effect:

• 

  Create a 3D Ribbon Wrap-Around Effect (Plus a Free PSD!)

  I thought it might be fun to create a tutorial on the popular 3d Wrap-Around Ribbon effect that has been popping up so much this year. This is a great way to add depth to your designs, and it’s pretty darn easy to complete.

  Visit the Post

• 

  Quick Tip: Practical CSS Shapes

  A common design technique lately is to create a fold effect, where it appears as if a heading is wrapping behind its container. This is generally achieved through the use of tiny images; however, with CSS, we can mimic this effect quite easily. I’ll show you how in four minutes.

  Visit the Post