How to set a shadow on a two panels page, regardless of its height?

Question

I have already found an answer, but I am not sure this is the best approach for my problem. My page has two panels: one sidebar and one content view. I want to have a shadow over the sidebar as if the content view was producing it:

The problem is that my sidebar is a menu with buttons, icons, etc. So if I try to set the (inset) shadow there:

.sidebar {
    box-shadow: inset -7px 0 9px -7px rgba(0,0,0,0.7);
}

I get:

So, where I have the buttons, they hide the shadow. If I do it the other way so the content view actually produces it:

.content {
    box-shadow: -7px 0 9px -7px rgba(0,0,0,0.7);
}

I get the shadow along with the content, but if the content is "shorter" than the total height of the screen, the shadow disappears. Similar to the previous case.

My final approach was to set a manual height for the content view or with Javascript, to adapt it to the viewport height. But I am not sure this is the best way to do it. I would like to know if there is a more CSS way to do it, without having to set things manually or getting shadows cut.

EDIT

While creating a fiddle for better understanding my problem I realized that I had a background-color on the buttons. But since I have a hover and a transition on the button, it still hides the shadow. Check it out: http://jsfiddle.net/h3cp59qd/

Sure, I think it will be easier to see it! I will update the question with the fiddle... — makeMonday, Aug 05 '15 at 12:32
@Jan_dh Yes, that would be one way. Better than manually setting the height. But I would not like to have a lot of empty space on a smaller device, like a phone. — makeMonday, Aug 05 '15 at 12:48

score 1 · Accepted Answer · answered Aug 05 '15 at 13:03

Check this out: http://jsfiddle.net/h3cp59qd/3/

Use position:absolute for both sidebar and content:

body, html {
    background: #D8D8D8;
    height: 100%;
    margin: 0;
    padding: 0;
}

#app {
    width: 100%;
    height: 100%;
    position: relative;
}

#sidebar {
    width: 20%;
    z-index: 1;
    position: absolute;
    top: 0;
    bottom: 0;
    background: #C8C8C8;
}

#sidebar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

#sidebar ul li {
    padding-left: 20px;
    height: 60px;
    text-transform: uppercase;
    color: white;
    font-weight: 900;
    font-size: 12pt;
    line-height: 60px;
    vertical-align: middle;
}

#sidebar ul li:hover {
    background: #c0c0c0; 
    color: #EEE;
}

#content {
    width: 80%;
    position: absolute;
    z-index: 100;
    left: 20%;
    top: 0;
    bottom: 0;
    padding: 0 50px;
    box-shadow: -7px 0 9px -7px rgba(0,0,0,0.7);
}

This is the best approach so far, solves my specific problem at least :) Just one last quick question.. if I had a `min-width` on `#sidebar`, would it be a problem? Thanks a lot! — makeMonday, Aug 05 '15 at 15:07

Kilowog · Answer 2 · 2015-08-05T12:54:31.867

0

Maybe just a shadow background image with a repeat-y could do the trick in your css stylesheet.

background-image:url('your-image.jpg');
background-repeat:repeat-y;

Your image should be the shadow 1px height and as larger as you need. Your header/footer can easily hide the shadow with their proper backgrounds.

EDIT I saw your edit, here is mine :)

#sidebar ul li:hover {
 background-color: #C0C0C0;
 color: #EEE;
 box-shadow: inset -7px 0 9px -7px rgba(0,0,0,0.7);
}

edited Aug 05 '15 at 12:54

answered Aug 05 '15 at 12:38

Kilowog

192
1
10

I just updated the question. The problem has changed a bit, because the it is now up to the `hover` of the button. So this approach would not work :( – makeMonday Aug 05 '15 at 12:46
I put an edit too :) – Kilowog Aug 05 '15 at 12:54
Did you get it work ? – Kilowog Aug 05 '15 at 14:50
Hey! Thanks for the answer.. it works, but it is not as smooth as I would like it to.. you can notice the different shadows on hover :/ – makeMonday Aug 05 '15 at 15:00

score 0 · Answer 3 · answered Aug 05 '15 at 12:52

0

just change your background color to gradient:

http://jsfiddle.net/anshalexander/h3cp59qd/2/

    background:-webkit-linear-gradient(left, #c0c0c0 0%,#c0c0c0 97%,#555 100%);

You can change the last color to match your shadow color

answered Aug 05 '15 at 12:52

Alex

457
3
16

Reinstate Monica -- notmaynard · Answer 4 · 2015-08-05T15:09:06.637

There are a few things that need to be corrected. First, remove the padding from #content (it's messing up the width and forcing that div to the bottom).

Add the same box-shadow from #sidebar to your #sidebar ul li:hover style:

#sidebar ul li:hover {
    background-color: #C0C0C0;
    color: #EEE;
    box-shadow: inset -7px 0 9px -7px rgba(0,0,0,0.7);
}

Then on #app add position: absolute and height: 100%:

#app {
    width: 100%;
    height: 100%;
    position: absolute;
}

Finally, on #sidebar remove min-height: 800px and add height: 100%, and that should fix it right up. See updated fiddle.

You'll notice that this adds a little bit of an edge to the buttons when they're being hovered over. This is due to the blur being greater than the offset. I think it looks good, but it can be fixed by increasing the (absolute values of) x-offset and spread values (the -7s) to greater than the blur-radius (the 9), e.g.:

box-shadow: inset -11px 0 9px -11px rgba(0,0,0,0.7);

How to set a shadow on a two panels page, regardless of its height?

EDIT

4 Answers4