Have you Seen the Ribbon below.it is Simply Awesome.This is a Swish folded 3D ribbon with CSS3. It can be created in few seconds with CSS3.
Adding the Ribbon is very easy .so follow the Below Steps :.
1) The Css :.
Paste the Below Code just Above the </b:skin> tag
.ribbon {font-family: 'Montez', cursive;
padding: 0 25px;
height: 80px;
color: #301607;
background-color: #c94700;
background-image: -webkit-gradient(linear, left top, left bottom, from(#c94700), to(#b84100));
background-image: -webkit-linear-gradient(top, #c94700, #b84100);
background-image: -moz-linear-gradient(top, #c94700, #b84100);
background-image: -ms-linear-gradient(top, #c94700, #b84100);
background-image: -o-linear-gradient(top, #c94700, #b84100);
background-image: linear-gradient(top, #c94700, #b84100);
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
position: relative;
float: left;
clear: left;
font-family: 'Montez', cursive;
font-size: 32px; line-height: 80px;
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
-moz-box-shadow: -7px 7px 0px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: -7px 7px 0px rgba(0, 0, 0, 0.3);
box-shadow: -7px 7px 0px rgba(0, 0, 0, 0.3);
border-bottom-right-radius: 20px 5px;
}
.ribbon:after {
content: ""; display: block;
width: 40px;
height: 0px;
position: absolute;
right: 0;
bottom: 4px;
z-index: 20;
border-bottom: 80px solid #de6625;
border-right: 80px solid transparent;
-webkit-transform: rotate(90deg);
-webkit-transform-origin: right bottom;
-moz-transform: rotate(90deg);
-moz-transform-origin: right bottom;
-o-transform: rotate(90deg);
-o-transform-origin: right bottom;
-ms-transform: rotate(90deg);
-ms-transform-origin: right bottom;
transform: rotate(90deg);
transform-origin: right bottom;
} .ribbon:before {
content: ""; display: block;
width: 20px;
height: 0px;
position: absolute;
right: 0;
bottom: 4px;
z-index: 10;
border-bottom: 80px solid rgba(0, 0, 0, 0.3);
border-right: 80px solid transparent;
-webkit-transform: rotate(80deg);
-webkit-transform-origin: right bottom;
-moz-transform: rotate(80deg);
-moz-transform-origin: right bottom;
-o-transform: rotate(80deg);
-o-transform-origin: right bottom;
-ms-transform: rotate(80deg);
-ms-transform-origin: right bottom;
transform: rotate(80deg);
transform-origin: right bottom;
} /*let's solve the unusual display problem caused by firefox*/ .ribbon#ff-proof:after { width: 0px;
height: 40px;
position: absolute;
right: -160px;
border-left: 80px solid #de6625;
border-bottom: 80px solid transparent;
-webkit-transform: none;
-moz-transform: none;
-o-transform: none;
-ms-transform: none;
transform: none;
}
Now After pasting the Above code.Now Again paste the Below Code just below <head> tag.
Add the below code below <head>
<link href='http://fonts.googleapis.com/css?family=Montez' rel='stylesheet' type='text/css'/>
Now For adding the Ribbon for New Posts just Use the Below Code
<h1 class="ribbon">YOUR_TEXT_HERE</h1>
That's it Now You're Done.