Lately we’ve been seeing ribbon style banners used on navigation menus and headers. It is a nice touch to your web design but involves using large images. In this tutorial we will be looking at how we can use CSS3 to create the same effect.
This is a good start for newbies of CSS3, and gives you a chance to use the :before and :after elements.
First we’ll start with the HTML. I’ve set up my page with the central content area, for this example we will be creating the ribbon effect around our h1 tag.
<div class="pagewrap"> <div class="content"> <h1>CSS Ribbon Example</h1> </div> </div>
Now for the CSS… I’ve set up the background of the website along with the page container:
body {font-size:62.5%;background: url(images/background.jpg) no-repeat top #fff; overflow:hidden;}
.pagewrap { width: 1150px; margin: 0 auto;}
.content-top{width:1024px; height:36px; float:left; overflow:hidden; background:url(images/content-top.png) no-repeat; margin:15px 0 0 4px;}
.content{width:964px; float:left; overflow:hidden; background:url(images/content-bg.png) repeat-y; margin:0 0 0 3px; padding:0 30px 20px 30px;}
.content-bottom{width:1024px; height:36px; float:left; overflow:hidden; background:url(images/content-bottom.png) no-repeat; margin:0 0 0 4px;}
Next we’ll set the background of the ribbon and offset it to the left so it is off the page slightly.
h1{font-family:Georgia, "Times New Roman", Times, serif; font-size:1.6em; color:#ecf1e1; text-shadow:0px 1px 2px #999; background:#8dbf41; padding:10px; width:25%; position:relative;margin: 30px 10px 10px -30px;}
You’ll now see a simple background colour around your h1 and it offset to the left so it comes off the main content area slightly. We now need to add the ribbon fold, to do this we’ll be using the border element to create a triangular shape.
h1:after{content: ' '; position: absolute; left: 2px; top: 100%; border-width: 5px 10px; border-style: solid; border-color: #5b851a #5b851a transparent transparent; width: 0; height: 0; }
We’re almost there now, to get the last final touch for our ribbon, we need to create another triangular shape to place over our ribbon to give a nice cut off at the end.
h1:before { content: ' ';position: absolute; width: 0px; height: 0; right: -2px;top: 0; border-width: 20px 10px; border-style: solid; border-color:transparent #fbf9f1 transparent transparent }
As simple as that! A couple of lines of css and no extra image files. There are the obvious browser compatibility issues with IE6 and IE7, but should work in all other browsers.
