CODEWITHSUNDEEP
css
Steve
Steve

Reputation: 4908

Creating a "sunken" effect

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.enter image description here

Upvotes: 5

Views: 19967

Answers (4)

Tanuki
Tanuki

Reputation: 121

A sunken effect of a rectangle is created by having its top/left sides have a darker edge and the bottom/right sides a lighter one.

So this one is tricky because you need 4 separate inset shadows on all four edges (or 2 if you combine top-right and bottom-left), with a colour determined per side. Luckily Alan Jereb commented on this answer a way to achieve just that.

Here's my example using 4 inset box-shadows that each target a side:

.hard-shadow-2px {
  /* top, right, bottom, left */
  box-shadow: inset 0px 3px 0px -1px #000,
              inset -3px 0px 0px -1px #fff,
              inset 0px -3px 0px -1px #fff,
              inset 3px 0px 0px -1px #000;
  /* or merged top-left, bottom-right */
  box-shadow: inset 3px 3px 0px -1px #000,
              inset -3px -3px 0px -1px #fff;
}
.hard-shadow-5px {
  /* top, right, bottom, left */
  box-shadow: inset 0px 10px 0px -5px #000,
              inset -10px 0px 0px -5px #fff,
              inset 0px -10px 0px -5px #fff,
              inset 10px 0px 0px -5px #000;
  /* or merged top-left, bottom-right */
  box-shadow: inset 10px 10px 0px -5px #000,
              inset -10px -10px 0px -5px #fff;
}
.soft-shadow-2px {
  /* top, right, bottom, left */
  box-shadow: inset 0px 4px 3px -2px #000,
              inset -4px 0px 3px -2px #fff,
              inset 0px -4px 3px -2px #fff,
              inset 4px 0px 3px -2px #000;
  /* or merged top-left, bottom-right */
  box-shadow: inset 4px 4px 3px -2px #000,
              inset -4px -4px 3px -2px #fff;
}
.soft-shadow-5px {
  /* top, right, bottom, left */
  box-shadow: inset 0px 10px 3px -5px #000,
              inset -10px 0px 3px -5px #fff,
              inset 0px -10px 3px -5px #fff,
              inset 10px 0px 3px -5px #000;
  /* or merged top-left, bottom-right */
  box-shadow: inset 10px 10px 3px -5px #000,
              inset -10px -10px 3px -5px #fff;
}

.example-top-shadow {
  box-shadow: inset 0 10px 6px -6px yellow;
}
.example-right-shadow {
  box-shadow: inset -10px 0 6px -6px blue;
}
.example-bottom-shadow {
  box-shadow: inset 0 -10px 6px -6px green;
}
.example-left-shadow {
  box-shadow: inset 10px 0 6px -6px white;
}
.example-shadow-per-edge {
  /* top, right, bottom, left */
  box-shadow: inset 0 10px 6px -6px yellow,
              inset -10px 0 6px -6px blue,
              inset 0 -10px 6px -6px green,
              inset 10px 0 6px -6px white;
}

/** the rest is just some basic formatting and lay-out for the preview **/
body { 
  background: #aaa;
  color: #fff;
  font-weight: 700;
}
div { 
  float: left;
  width: 160px;
  height: 20px;
  margin: 10px;
  padding: 10px;
  background: red;
}
hr, div:nth-of-type(2n+1) { 
  clear: left;
}
<div class="hard-shadow-2px">hard, 2px</div>
<div class="hard-shadow-5px">hard, 5px</div>
<div class="soft-shadow-2px">soft, 2px</div>
<div class="soft-shadow-5px">soft, 5px</div>
<hr>
<div class="example-top-shadow">top</div>
<div class="example-right-shadow">right</div>
<div class="example-bottom-shadow">bottom</div>
<div class="example-left-shadow">left</div>
<hr>
<div class="example-shadow-per-edge"></div>

The four box-shadow pixel values are:

  1. offset-x: positive is to the left, negative to the right;
  2. offset-y: positive is to the top, negative to the bottom;
  3. blur-radius: 0 for a hard edge, higher value (never negative) for a softer edge;
  4. spread-radius: positive value to expand, negative value to shrink.

So you target a side with 1st and 2nd, hard/soft with 3rd.

The combination of the 1st (and/or 2nd, if you're targeting top-left or bottom-right together) with the 4th is what defines the thickness of the inset shadow. You subtract the absolute value of the spread-radius from the absolute value of the specified offset-X or offset-Y.

Examples:

  • inset -10px 0px 0px -5px #fff, => 10 minus 5 is 5px shadow
  • inset 4px 0px 3px -2px #000; => 4 minus 2 is 2px shadow

To create the opposite effect, just switch the dark and light colours.

Upvotes: 1

itsmikem
itsmikem

Reputation: 2168

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.

Upvotes: 3

Josiah
Josiah

Reputation: 4793

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.

Upvotes: 13

Afzaal Ahmad Zeeshan
Afzaal Ahmad Zeeshan

Reputation: 15860

Sunken thing? I would image you are trying to get a pressing effect, like the element is getting inside.

For that you might consider using inset, that's a shadow property which would make the browser give an effect to the element, and will make it feel sunken.

div {
 box-shadow: inset 1px 1px 3px #999;
}

Just add the inset, and it will feel sunken!

Here is a jsfiddle for that: http://jsfiddle.net/afzaal_ahmad_zeeshan/jfRDA/

And here is an imageenter image description here

You can add the shadow effect as much as you want! :)

Upvotes: 1

Related Questions