Creating a "sunken" effect

Question

The attached figure has an effect that makes the box look like it has a thickness of about a page and it's sitting on the surface. All four sides look like they're raised. I'm looking for the opposite effect that would make the box look like it's "sunken" by about a page thickness.

Thanks for any ideas.

Answer 1

I think really you just want to add 'inset' to your box-shadow rule. See http://www.w3schools.com/cssref/css3_pr_box-shadow.asp for more details.

Something like:

box-shadow: 1px 1px 5px #555 inset;

So for your example, http://jsfiddle.net/FY2mk/ works fine.

Answer 2

Here's a thought:

<div
  style="
    box-shadow: inset 2px 5px 20px #555;
    width: 100px;
    height: 100px;
    border-radius: 5px;
  "
>
  <div
    style="
      width: 50px;
      height: 50px;
      background: #f00;
      box-shadow: inset 0px -10px 25px #700, 0px 5px 5px #333;
      margin: 20px 30px;
      display: block;
      position: absolute;
      border-radius: 5px;
    "
  >
    page
  </div>
</div>

http://jsfiddle.net/sK5bB/80/

You can achieve quite a lot if you play around with the box-shadow parameters.