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

Need help with cloud hosting? Try Server Intellect. We used them for our cloud hosting services and we are very happy with the results!

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:

Code Block
Ask a Question
Download Source
index.html
Setting up our initial structure:
<body>
<div id="wrapper">
<div id="ribbon">
	<span class="leftTriangle"></span>
    <span class="rightTriangle"></span>
</div>
</div>
</body>

STEP TWO:
The CSS

Code Block
Ask a Question
Download Source
style.css
Styling out the wrapper element:
#wrapper
{
    background: #fff;
    border: 1px solid;
    border-radius: 2em;
    height: 60em;
    margin: 6em auto 0em auto;
    -moz-border-radius: 2em;
    -moz-box-shadow: .2em .2em #999;
    -webkit-border-radius: 2em;
    -webkit-box-shadow: .2em .2em #999;
    width: 45em;
}

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:

Code Block
Ask a Question
Download Source
style.css
Creating the ribbon overlay:
#ribbon
{
    background: #609af0;
    border: 1px solid #999;
    height: 5em;
    margin: 2em 0em 0em -1.5em;
    -moz-box-shadow: .2em .1em #999;
    -webkit-box-shadow: 0em .1em #999;
    width: 48em;     
}

Server Intellect assists companies of all sizes with their hosting needs by offering fully configured server solutions coupled with proactive server management services. Server Intellect specializes in providing complete internet-ready server solutions backed by their expert 24/365 proactive support team.

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:

Code Block
Ask a Question
Download Source
style.css
Creating the left triangle:
.leftTriangle
{
    display: block;
    border-color: transparent transparent transparent #2784f5;
    border-style: solid;
    border-width: 16px;
    -moz-transform:rotate(-45deg);
    position: relative;
    left: 6px;
    top: 66px;
    -webkit-transform:rotate(-45deg);
    width: 0px;
    height: 0px; 
}

Preview in browser:
Left Triangle Preview

Code Block
Ask a Question
Download Source
style.css
Creating the left triangle:
.rightTriangle {
	display: block;
	border-color: transparent transparent transparent #2784f5;
	border-style: solid;
	border-width: 16px;
	-moz-transform: rotate(-135deg);
	position: relative;
	left: 728px;
	top: 34px;
	-webkit-transform: rotate(-135deg);
	width: 0px;
	height: 0px;
}

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!

We moved our web sites to Server Intellect and have found them to be incredibly professional. Their setup is very easy and we were up and running in no time.

Download CSS3 Ribbon Source Files