Destino Solutions

+91 9747866100

How to Add CSS3 Paper Curl Effect for Blogger

April 29th, 2014

Today I’m sharing a awesome trick for Blogger blog users, How to Add CSS3 Paper Curl Effect for Blogger blog. So it is Very simple to add your Blogger main outer. It is very pretty look for Who is want simple designs. This Box-Shadow effect Support latest Web Browsers, Also you can add vendor prefix for old Web Browsers.

Paper Curl Effect is tested on a Blogger Simple Template, Maybe It Support all default Blogger Templates. Recently I’m shared A template, It is a live demo about Paper Curl Effect.Firstly I’m saying thanks for a friend, He shared this CSS3 trick on CssDeck. Now I am Explaining How to add CSS3 box shadow effect on Blogger Blog.

Follow Steps 

Note : Backup Blogger Template After do following Steps
Go to Blogger > Template > Edit HTML
Find following html (Ctrl+F).

]]></b:skin>

Just Above Paste Following CSS.

.content-outer {

    background: #FFFFFF;
    -moz-border-radius: 6px 6px 6px 6px;
    -webkit-border-radius: 6px 6px 6px 6px;
    border-radius: 6px 6px 6px 6px;
    -moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
    position: relative;
}
.content-outer:before, .content-outer:after {
    background: none;
    bottom: 12px;
    -moz-box-shadow: 0 10px 12px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 0 10px 12px rgba(0, 0, 0, 0.5);
    box-shadow: 0 10px 12px rgba(0, 0, 0, 0.5);
    content: "";
    height: 10px;
    left: 12px;
    position: absolute;
    width: 40%;
    z-in3dex: -1;
    -moz-transform: skew(-4deg) rotate(-4deg);
    -webkit-transform: skew(-4deg) rotate(-4deg);
    transform: skew(-4deg) rotate(-4deg);
}
.content-outer:after {
    -moz-transform: skew(4deg) rotate(4deg);
    -webkit-transform: skew(4deg) rotate(4deg);
    transform: skew(4deg) rotate(4deg);
    left: auto;
    right: 12px;
}

Just Look Preview, After Save Template.
You have Any Questions? Please feel free mentioned it below comment box.

Categories: Blogger