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.

Shadow page

• Barney: « I tried using box-shadow with inset but it worked. » — I suppose you mean but it didn't work — but what were the results?

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 :)