CODEWITHSUNDEEP
htmlcss
Jon
Jon

Reputation: 3184

Shadow on center container; color bands underneath

I'm designing my portfolio site right now and I'm trying to figure out the best way to create the following effect using CSS. I want to have a center container with a box-shadow, and then color bars to visually separate out the different sections.

enter image description here

I'm not sure what the best method is to accomplish this since you can't create a box-shadow that only extends from the left and right. Currently, I have the following:

    <div id="content"> // the container with the shadow </div>
    <div id="header"> // the brown section </div>

#content {
    width:960px;
    margin:auto auto;
    box-shadow:0px 0px 50px 5px #999;
}

#header {
    position:absolute;
    top:0;
    z-index:-99;
    width:100%;
    height:550px;
    background:#cbbbae; 
}

enter image description here

This "works", but I don't want to rely on absolute positioning. Ideally, each section would be it's own div container, and I would just change the background color.

Perhaps there's an obvious solution that I'm missing, but that's why I'm here.

Upvotes: 0

Views: 618

Answers (2)

t.niese
t.niese

Reputation: 40862

haven't tested if it works cross browser with older versions (in current version of Chrome, FF and Safari it works), you could use negative margin and overflow hidden (probably you need to do some tweaking with paddings to get it working everywhere):

CSS

.inner {
    margin: auto;
    width: 100px;
    margin-top: -5px;
    margin-bottom: -5px;
    padding-top: 5px;
    padding-bottom:5px;
    box-shadow: black 0px 0px 10px;
}
.outer {
    overflow: hidden;
    background-color: rgb(255,255,200);
}

.outer2 {
    overflow: hidden;
    background-color: rgb(200,200,255);
}

HTML

<div class="outer">
    <div class="inner">test</div>
</div>
<div class="outer2">
    <div class="inner">test</div>
</div>

Upvotes: 1

Ilja
Ilja

Reputation: 46499

Something I thought of is having a div which covers whole page, so acts as your body and than apply gradient to it to achieve 3 different colours. Than within such div have another div which extends to the whole page vertically, and give it a box shadow.

Here is live example: Example

HTML

<div class="container">
    <div class="page-wrap"></div>
</div>

CSS

.page-wrap {
    margin: 0 20%;
    width: 60%;
    height: 100%;
    position: absolute;
    box-shadow: 0 0 5px 2px #424242;
}

.container {

    width: 100%;
    height: 100%;
    position: absolute;
    background: #cbbcaf;
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#cbbcaf), color-stop(0.15, #cbbcaf), color-stop(0.15, #ffffff), color-stop(0.51, #ffffff), color-stop(0.85, #ffffff), color-stop(0.85, #90c8fc), to(#90c8fc));
    background: -webkit-linear-gradient(#cbbcaf 0%, #cbbcaf 15%, #ffffff 15%, #ffffff 51%, #ffffff 85%, #90c8fc 85%, #90c8fc 100%);
    background: -moz-linear-gradient(#cbbcaf 0%, #cbbcaf 15%, #ffffff 15%, #ffffff 51%, #ffffff 85%, #90c8fc 85%, #90c8fc 100%);
    background: -o-linear-gradient(#cbbcaf 0%, #cbbcaf 15%, #ffffff 15%, #ffffff 51%, #ffffff 85%, #90c8fc 85%, #90c8fc 100%);
    background: linear-gradient(#cbbcaf 0%, #cbbcaf 15%, #ffffff 15%, #ffffff 51%, #ffffff 85%, #90c8fc 85%, #90c8fc 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cbbcaf', endColorstr='#90c8fc',GradientType=0 );

}

Note, you can tweak percentages in the gradient to achieve height for different colours that meets your needs. However, you'll need to use absolute positioning if you wan't to do it like this.

Upvotes: 0

Related Questions