A recent trend in modern web design is the use of CSS3 to add depth to normally bland-looking elements. Things like rounded corners and shadows are being used in extremely creative ways, and today we’ll see how to create one of the more commonly used effects known as the ribbon technique. In a website, a ribbon would normally be used to make it appear that there is a “band” that wraps around the center content. They typically look something like this:
Sample

As you can see, it appears that the ribbon is actually surrounding the center piece of the site. This effect takes some carefully planned CSS, and as you’ll soon see, a couple of new tricks included with the CSS3 specification. Ready to see how it’s done? Let’s go!

NOTE: This effect only works with WebKit-based browsers; Safari, Mobile Safari or Google Chrome. I’m positive that Mozilla and Opera will catch up with these CSS features.

STEP ONE:

The HTML

To get started, we’ll use a center wrapper that contains the rest of our elements. Here’s what the initial HTML should look like:

STEP TWO:

The CSS

Preview in browser:

(Size adjusted to fill the page)
Wrapper Preview

First, we added a pure white background color to ensure that our wrapper stands out from the off-white page. Next, we gave it a simple 1 pixel border for a splash of definition. We used the border-radius, -moz-border-radius, and webkit-border-radius declarations to round out the corners, and the equivalent box-shadow declarations to add a touch of drop-shadow to our design. This is the easy part. The ribbon is where the real fun will come into play. Let’s see how it’s done.

STEP THREE:

The Ribbon

Now, we’ll get into some clever CSS trickery that not too many people know about. In order to create the wrapping effect for our ribbon, we’ll need to know how to make CSS triangles. It is a lesser-known fact that when borders are drawn in CSS, they are drawn at an angle. This means that if we define all but one side of a border to be transparent, we’ll end up with a perfect triangle. Before we get into the triangles, let’s create the overlay portion of our ribbon:

Preview in browser:
Ribbon Preview

Here, we’ve simply added a blue background and some shadow, as well as positioned the ribbon so that it is centered over our wrapper. Let’s move on to the triangles.

Recall that CSS triangles are created by making 3 out of 4 sides of a border transparent. It takes a few more lines of code to accomplish this, but the end result is awesome. Have a look at the code for our triangles:

Preview in browser:
Left Triangle Preview

Preview in browser:
Right Triangle Preview

The positioning of the triangles is what ends up giving us the epic 3D effect, but there are a few important things going on that you may want to note. First, again, notice that the border-colors have 3 transparent values. This is what creates the triangular effect we were looking for. We’ve also done a bit of transforming by rotating our triangles, to make sure they fit in their respective corners.
Be sure to download the source files so that you can see the ribbon in action!

Using a bit of fancy CSS we were able to create shapes and use them effectively. Today’s tutorial has been a great example of how knowing some of these common CSS techniques can really come in handy. We’ll be continuing our CSS creations next time, and hope to see you there!

Download Source Files