3D Ribbon With CSS3

CSS3 is a fantastic tool to design good looking websites and in this tutorial, we are going to see how to create a nice Ribbon with 3D effect and drop shadow to make your page title or even menu more artistic and pleasant to look at.

3D Ribbon demo

If done well, this is the result you should get at the end of this tutorial.

Ribbon Effect

HTML

First of all start with the following very simple and minimal HTML markup. Nothing really difficult so far.

<h1 id="rib_effect">
    <span id="rib_text">Ribbon Effect</span>
</h1>

CSS

Now we can add the CSS style and that here all the magic happens.

#rib_effect {
     font-size: 18px;
     width: 350px;
     position: relative;
     background: #869bc7;
     color: #fff;
     text-align: center;
     text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
     box-shadow: 0px 5px 8px rgba(0,0,0,0.3);
     -webkit-box-shadow: 0px 5px 8px rgba(0, 0, 0, 0.3);  
     -moz-box-shadow: 0px 5px 8px rgba(0, 0, 0, 0.3);
     padding: 20px 30px;
     margin: 30px auto 40px;
}

#rib_effect:before, #rib_effect:after {
     position: absolute;
     bottom: -18px;
     border: solid 30px #677798;
     content: "";
     z-index: -1;
}

#rib_effect:after {
     border-left-width: 60px;
     border-right-color: transparent;
     right: -72px;
}

#rib_effect:before {
     border-right-width: 60px;
     border-left-color: transparent;
     left: -72px;
}

#rib_effect #rib_text:after, #rib_text:before {
     position: absolute;
     border-style: solid;
     border-color: #524f80 transparent;
     content: "";
     bottom: -18px;
}

#rib_effect #rib_text:after {
     right: 0;
     border-width: 18px 18px 0 0;
}

#rib_effect #rib_text:before {
     left: 0;
     border-width: 18px 0 0 18px;
 }

You can change some of the CSS properties to match the design of your website such as background, border or any others with a colour value.

2 thoughts on “3D Ribbon With CSS3”

i wanna add a text of 7em to it but wen i do it the whole format changes how can i do i ?? :/

WebTutorialSource says:
19th May 2013 at 5:28 pm
@vallabh for that to display properly you will have to adjust some values in the CSS.The values depends on the length of your text but here are the ones you will need to change.In the .rib_effect change the width value to fit your text. Then try to change the commented values:
```
.rib_effect:after, .rib_effect:before {
position: absolute;
bottom: -18px;
border: solid 80px #677798;/* I changed the px value here */
content: "";
z-index: -1;}
.rib_effect:after {
border-left-width: 60px;
border-right-color: transparent;
right: -122px;/* changed value here */
}
.rib_effect:before {
border-right-width: 60px;
border-left-color: transparent;
left: -122px;/* and here */
}
```
again you need to adjust those values to fit your text. Hope this helps.
Reply