CSS3 shadow like image

Question

How to create pages similar to a book shadows, using two divs and CSS3? Equal in the image that follows attachment.

I tried using box-shadow with inset but it worked.

box-shadow:  inset -5px -5px 5px #888;

Thank you.

Answer 1

You can use linear gradient:

.leftPage{
    background: linear-gradient(to right, #fff 92%, #9f9f9f 100%);
}
.rightPage{
    background: linear-gradient(to left, #fff 95%, #898989 100%);
}

example -> jsfiddle

Answer 2

Here you go http://jsfiddle.net/DhgY8/1/

HTML

<div class="book">
    <div class="left page"></div>
    <div class="right page"></div>
</div>

CSS

.book {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: silver;
}
.left {
    box-shadow: 6px 0 2px 1px black, -8px 0 6px grey inset;
    z-index: 3;
    left: 0;
}

.right {
    right: 0;
}
.page {
    background: white;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50%;
}

It's not perfect, but it's pretty close to what you want :)