Creating Ribbons in CSS3

Ribbons are often used in a website’s design. Now we can create these ribbons using different css3 techniques and without images. CSS3 Ribbons create a special 3D perception which is often used in modern designs.

In order to create these CSS3 ribbons we start with the technique to give shadow to an object: box-shadow. We give the ribbon and the shadow a color using RGBA technique where we can add opacity to the object as well. With RGBA we first give the Red,Green and Blue values for our color and then the opacity value. We can create following basic layout, adding some rounded corners to the background and aligning the banner over the background with some margins left and right.

<div class="bubble">
<div class="banner"><h2>CSS3 Ribbon</h2></div>
<div>
<h2>Basic CSS3 layout using box-shadox and text-shadow</h2>
<p>
this is the layout before we add the triangles to create 3D ribbons in CSS3
</p>
</div>
</div>

.bubble{
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;

	box-shadow: 0 0 8px rgba(0,0,0,.6);
	-webkit-box-shadow: 0 0 8px rgba(0,0,0,.6);
	-moz-box-shadow: 0 0 8px rgba(0,0,0,.6);

	position: relative;
	background: #fff;
	z-index: 90; /* stack order: background */
}

.banner{
	background: #E7B550;
	padding: 0px 15px;
	left: -15px; top: 15px;
	float: left;
	height: 30px;
	width: 100%;
	-moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
  	-webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
	z-index: 100; /* stack order: foreground */
}

Now we have our banner but still no 3D ribbon effect. Herefor we need to create triangles with css3 and position them correctly towards the banner. We add two empty divs that will represent the left and right triangle, the left triangle will have a negative margin to the left while the right triangle will have the full width of the content as margin. The background for the triangles is slightly darker then the one for the banner to create the depth effect.

<div class="bubble">
<div class="banner"><h2>CSS3 Ribbon</h2></div>
<div class="left_triangle"></div>
<div class="right_triangle"></div>
<div>
<h2>Creating Ribbons with only CSS3</h2>
<p>
3D Ribbons creating in CSS3 using different techniques; box-shadow, text-shadow, css3 triangles
</p>
</div>
</div>

.triangle{
	height: 0px;
	width: 0px;
	border-style: solid;
	position: relative;
	border-width: 15px;
	z-index: 80; /* stack order: behind background */
}

.triangle_left{
	border-color: transparent #E1A223 transparent transparent;
	margin-left: -30px;
	top: 30px;
}

.triangle_right{
	border-color: transparent transparent transparent #E1A223;
	margin-left: 100%;
}

at last we add some basic padding to our content to make the total picture look nice.