Simulate page break with box-shadows

Question

I am trying to create a page separation with CSS but I faced an issue with the box-shadow property.

I have a container whitch looks like a black page, and I want to separate it into two pages with a same lookas the end and start of page. Here is an image of what I have (note the gap between the side and bottom shadows):

_{(source: noelshack.com)}

and here is an image of the desired output:

_{(source: noelshack.com)}
.

Requirements:

1. I need to get exactly the same on the separation corner.
2. I can't use two containers because I drag & drop items in this one, I can only use one container.
3. The container height is dynamic.

fiddle

HTML:

<div class="container">
    <div class="calPrin" id="barrePage1">
        <div class="calHaut"></div>
        <div class="calBas"></div></div>
    </div>
</div>

CSS:

body{
    background-color:rgb(186,186,186);
}

.container{
    border: solid 1px black;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 1px 1px 1px;
    width: 782px;
    background-color: #FFFFFF;   
    height:500px;
 
}

.calHaut{
    width: 782px;
    background-color: rgb(255, 255, 255);
    border-bottom: solid 1px black;
    border-right: 1px solid black;
    border-left: 1px solid black;
    box-shadow: 0.5px 1px 1px;
    position: absolute;    
}

.calBas{
    position: relative;
    top: 4px;
    background-color: rgb(255, 255, 255);
    height: 2px;
    width: 782px;
    border-top: solid black 1px;
    border-right: solid 1px black;
    border-left: 1px solid black;
}

.calPrin{
    top:50px;
    background-color: rgb(186,186,186);
    height: 6px;
    position: absolute;
    width: 786px;
    left:8px;
}

Answer 1

If you want to simulate a page break inside your container with box shadows, you can do this :

DEMO

output:

*****EDIT*****

For your use case, you can remove one div and with a bit of tweaking fo the shadows, you can get this :

DEMO

---

Code for the first demo :

HTML:

<div class="container">
    <div class="calPrin"></div>
    <div class="shdw-right"></div>
</div>

CSS:

body {
    background-color:rgb(186, 186, 186);
}
.container {
    border: solid 1px black;
    margin-left: auto;
    margin-right: auto;
    width: 782px;
    background-color: #FFFFFF;
    height:500px;
    position:relative;
    margin-bottom:100px;
    box-shadow: 10px 10px 5px #656565;
}
.calPrin {
    position:relative;
    left:-1px;
    width:784px;
    height:50px;
    border-top:1px solid #000;
    border-bottom:1px solid #000;
    background-color:rgb(186, 186, 186);
    z-index:1;
    box-shadow: inset 0px 15px 5px -5px #656565;
}
.calPrin:before, .calPrin:after {
    content:'';
    position:absolute;
    background:#BABABA;
    z-index:2;
    width:10px;
}
.calPrin:before {
    height:100%;
    right:100%;
    border-right:3px solid #BABABA;
    box-shadow: 10px 0px 5px 0px #BABABA;
}
.calPrin:after {
    left:100%;
    top:20px;
    bottom:0;
    width:15px;
    box-shadow: 0px 10px 5px 0px #BABABA;
}
.shdw-right {
    position:relative;
    left:100%;
    width:30px;
    top:-31px;
    margin-left:-15px;
    height:20px;
    background:#BABABA;
    box-shadow: 0px -10px 5px 0px #BABABA;
}

Answer 2

There is a beautiful solution using calc but looks like calc is still not widely supported by old browsers (especially IE browsers). You can use :before and :after to add pseudo-elements for the .container and simply add border, box-shadow and background for those elements instead while the border, background and box-shadow of the container should be removed (the default background is transparent).

HTML:

<div class="container">
  <h2>Title goes here</h2>    
</div>

CSS:

body{
  background-color:rgb(186,186,186);
}
.container {    
  margin-left: auto;
  margin-right: auto;    
  width: 782px;    
  height:500px;    
  position:relative;      
}
.container:before {
  content:'';    
  width:100%;
  height:50px;
  position:absolute;
  box-shadow:1px 1px 1px;
  left:0;
  top:0;
  z-index:-1;
  border:1px solid black;
  background:white;
}
.container:after {
  content:'';
  width:100%;
  height:calc(100% - 57px); /* 50px of the top and 7px of the divider */
  position:absolute;
  box-shadow:1px 1px 1px;
  left:0;
  bottom:0;
  z-index:-1;
  border:1px solid black;       
  background:white;     
}

If your container's height is absolute (and fixed) (as in your code, it's 500px) you can still calculate the value for the height of the :after yourself (it's 443px) without using calc. However if it's not absolute, this solution won't work.

Demo.

Note that the script I added in the demo is just to show that user can still interact with the actual container. All the :before and :after are sent to behind.

Finally, you can always use more elements (including real and pseudo-elements) to achieve what you want but it's fairly complicated, requires a lot of positioning and layering techniques.

Answer 3

Your third box-shadow property is the v-shadow, which moves the whole shadow up or down.

The only way to achieve your desired effect with a box-shadow is to apply a box-shadow to a container, and set the v-shadow to 0 but apply padding to the bottom and right of the container.

I'm not sure how being able to drag and drop into this element will be affected by putting it in a container - after all, it is already contained by other DOM elements such as the body.

Answer 4

not too sure of what you look for, but would an <hr/> be more adapted ? DEMO

With such CSS :

body{
  background-color:rgb(186,186,186);
}
.container{
  margin-left: auto;
  margin-right: auto;
  box-shadow: 
    1px 1px 1px,
    inset 0 0 0 1px;
  padding:1px;
  width: 782px;
  background-color: #FFFFFF;   
  height:500px;
}
hr {
  padding:0;
  position:relative;
  border:none;
  height:8px;
  background-color:rgb(186,186,186);
  margin:0.25em -3px 0.25em -1px;
  border-bottom:1px solid;
}
hr:before {
  content:'';
  height:0.1px;
  margin:-3px 4px 3px 0px;
  display:block;
  box-shadow:2px 0px 1px 1px  black;
  background:white;
  border-bottom:1px solid black;
}

Answer 5

Is this the effect you are trying to get? http://jsfiddle.net/mHn29/2/

<div class="pane">one</div>
<div class="pane">two</div>

css

body{
    background-color:rgb(186,186,186);
}

.pane{
    padding: 5px 10px;
    margin: 5px 0;
    border: 2px solid black;
    border-width: 2px 4px;
    background-color: #FFFFFF;  
    box-shadow: 1px 1px 1px;
}

Answer 6

There's two difficulties going on here:

1. The box-shadow is larger than the element, not just shifted to the right. This is solved by the spread-radius option in box-shadow. See box-shadow on MDN.
2. The box-shadow looks to be blurred except for on the top side of the element. This can be solved by covering up the top shadow with a pseudo-element... this is an odd design choice, but I left it in my example anyway to see how you might do it.

Pen with an example of spread-radius and covering up box-shadow's top blur with a pseudo-element: http://codepen.io/tholex/pen/uobEA