26.4.12

Add a Swish Css3 Ribbon To Blogger

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.

Saikiransama

Twitter Delicious Facebook Digg Stumbleupon Favorites More

 
Powered by Blogger