I've been through about 10 questions on this topic and couldn't find a solution that fits my specific situation.
Here's an example I created:
I'm trying to hide the shadow at the top of the content box. Not sure if I'm approaching it the right way, or if there's a better method than using backgrounds for side shadows. Any suggestions would be greatly appreciated!
Here's some code:
HTML code
<div class="container-wrapper">
Your header content goes here
</div>
<div class="container-wrapper breadcrumbz">
<div class="pusher"></div> <!-- Just for experimental purposes -->
<div class="content">
There should be no shadow on top of this block
</div>
</div>
CSS
body {
background: #4ca8cb;
}
.container-wrapper {
margin: 0 auto;
max-width: 500px;
padding:0 50px;
}
.breadcrumbz {
background: url('https://dl.dropboxusercontent.com/u/14562883/shadowline.png') no-repeat top center;
}
.pusher {
height: 14px;
}
.content {
box-shadow: 0px 0px 3px 1px #555;
background-color: #e7eaeb;
height: 200px;
}
Update
I managed to solve the issue by moving the bottom block "under" using CSS properties like position:relative and negative margins.
You can see the updated solution here: http://jsfiddle.net/Y4uHm/7/