CSS Paper Effect

CSS Paper Effect

DEMO 1 - CSS Paper Effect

<style>
@import url(http://fonts.googleapis.com/css?family=Allura|Aladin);
.paper {
  border-top: 30px solid #252525;
  width: 650px;
  margin:20px auto;
  -moz-box-sizing: border-box;
  -webkit-box-sizing:border-box;
  box-sizing:border-box;
  background-color: #FFFFAF;
  background-image: -webkit-linear-gradient(90deg, transparent 21px, #CB764A 49px, #CB764A 54px, transparent 24px, transparent 29px, #A0522D 59px, #CB764A 61px, transparent 30px), -webkit-linear-gradient(#A4CE9A .1em, transparent .1em);
  background-image: -moz-linear-gradient(90deg, transparent 21px, #CB764A 49px, #CB764A 54px, transparent 24px, transparent 29px, #A0522D 59px, #CB764A 61px, transparent 30px), -moz-linear-gradient(#A4CE9A .1em, transparent .1em);
  background-image: -o-linear-gradient(90deg, transparent 21px, #CB764A 49px, #CB764A 54px, transparent 24px, transparent 29px, #A0522D 59px, #CB764A 61px, transparent 30px), -o-linear-gradient(#A4CE9A .1em, transparent .1em);
  background-image: -ms-linear-gradient(90deg, transparent 21px, #CB764A 49px, #CB764A 54px, transparent 24px, transparent 29px, #A0522D 59px, #CB764A 61px, transparent 30px), -ms-linear-gradient(#A4CE9A .1em, transparent .1em);
  background-image: linear-gradient(90deg, transparent 21px, #CB764A 49px, #CB764A 54px, transparent 24px, transparent 29px, #A0522D 59px, #CB764A 61px, transparent 30px), linear-gradient(#A4CE9A .1em, transparent .1em);
  -webkit-background-size: 100% 21px;
  -moz-background-size: 100% 21px;
  background-size: 100% 21px;
  line-height:  21px !important;
  padding: 0 10px 1px 75px;
  position:relative
}

.paper:after {
    bottom: 27px;
    box-shadow: 0 28px 8px rgba(0,0,0,0.8);
    content: "";
    height: 25px;
    position: absolute;
    width: 45%;
    z-index: -1;
    right: 1%;
    transform: rotate(7deg);
    -webkit-transform: rotate(7deg);
    -moz-transform: rotate(7deg);
    -mstransform: rotate(7deg);
    -o-transform: rotate(7deg)}

.paper span {
  margin: 0 0 23px 0;font:bold 20px/normal 'Aladin', cursive;letter-spacing:2px;color:#111}
.infoTitle {
    margin: 0 0 20px 0;padding-top:20px;color:#111;
    font-family: 'Aladin', cursive;
}
</style>

<div class="paper">
  <span>SAHABAT BLOGGER 77</span>
     <div class="infoTitle">
...
Insert Your Information Text Here
...
     </div>
</div>