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.

3D Ribbon demo

Here is the result you should get at the end of this tutorial.

Ribbon Effect

HTML

First of all start with the following markup.

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

CSS

Now we can add the CSS style.

#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;
 }

Comments

2 Comments

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

Comments are closed.