3D shadow effect paper like styling - html

Question

Can i add this style to all the coners and not only at the bottoms corners ? - and if yes how can i do it. I'm trying to make it at the sides not the bottom, it should look like it is a paper there has folded each corner. If you look at the ex. 2 if you press the link. i want to add the same styling there is at the bottom to the top so all 4 corners are folded..
http://cssdeck.com/labs/different-css3-box-shadows-effects
I have succesfully made it to the the top side corners, but i'm missing the bottom coners. heres my code..
HTML:
#d {
margin: auto;
width: 1140px;
position: relative;
z-index: 30000;
}
.content_wrapper {
margin: auto;
width: 1140px;
position: absolute;
z-index: 30;
}
.content_inner {
width: 1140px;
height: 800px;
float: left;
background-color: #baced8;
}
.effect {
position: relative;
}
.effect:before,
.effect:after {
z-index: -1;
position: absolute;
content: "";
bottom: 40px;
left: 19px;
width: 50%;
top: 4%;
max-width: 300px;
background: rgba(101, 102, 103, 0.9);
-webkit-box-shadow: 0 0 15px 10px rgba(101, 102, 103, 0.9);
-moz-box-shadow: 0 0 15px 10px rgba(101, 102, 103, 0.9);
box-shadow: 0 0 15px 10px rgba(101, 102, 103, 0.9);
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
transform: rotate(-3deg);
}
.effect:after {
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
-o-transform: rotate(3deg);
-ms-transform: rotate(3deg);
transform: rotate(3deg);
right: 19px;
left: auto;
}
#content_box {
width: 1134px;
height: 770px;
float: left;
margin-left: 3px;
background-color: white;
}
<div id="d">
<div class="content_wrapper">
<div class="content_inner effect effect2">
<div id="content_box">
</div>
<!--content_box-->
</div>
<!--content_inner-->
</div>
<!--content_wrapper-->
</div>

Answer 1

You could use another element like the .content_wrapper to get yourself another two pseudo-elements. Those two are showing the shadow to the bottom.
I assume it looks the way you want it:
http://codepen.io/anon/pen/pvmYXm
effect:before, .effect:after,
.content_wrapper:before, .content_wrapper:after {
content: "";
position: absolute; top: 4%; bottom: 40px; left: 19px;
width: 50%; max-width: 300px;
background: rgba(101,102,103,0.9);
box-shadow: 0 0 15px 10px rgba(101,102,103,0.9);
-webkit-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
transform: rotate(-3deg);
z-index: -1;
}
.effect:after, .content_wrapper:after {
right: 19px; left: auto;
-webkit-transform: rotate(3deg);
-ms-transform: rotate(3deg);
transform: rotate(3deg);
}
.content_wrapper:before {
-webkit-transform: rotate(3deg);
-ms-transform: rotate(3deg);
transform: rotate(3deg);
}
.content_wrapper:after {
bottom: 40px; right: 19px;
-webkit-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
transform: rotate(-3deg);
}