0

私は現在ポートフォリオ サイトをデザインしており、CSS を使用して次の効果を作成する最良の方法を見つけようとしています。ボックスの影が付いた中央のコンテナが必要で、次にカラーバーを使用してさまざまなセクションを視覚的に分離したいと考えています。

ここに画像の説明を入力

左右からしか伸びないボックスシャドウを作成できないため、これを達成するための最良の方法はわかりません。現在、私は以下を持っています：

    <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; 
}

ここに画像の説明を入力

これは「機能します」が、絶対位置に依存したくありません。理想的には、各セクションは独自の div コンテナーであり、背景色を変更するだけです。

おそらく、私が見逃している明らかな解決策があるかもしれませんが、それが私がここにいる理由です。

4

2 に答える 2

1

古いバージョンのクロス ブラウザで動作するかどうかはテストしていません (現在のバージョンの Chrome、FF、および Safari では動作します)。 :

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>
于 2013-03-17T22:37:23.040 に答える
0

私が考えたのは、ページ全体をカバーするdivがあることです。これは、体として機能し、グラデーションを適用して3つの異なる色を実現します。そのようなdiv内よりも、ページ全体に垂直に伸びる別のdivがあり、ボックスシャドウを付けます。

これが実際の例です：例

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 );

}

グラデーションのパーセンテージを微調整して、ニーズに合ったさまざまな色の高さを実現できることに注意してください。ただし、このようにしたくない場合は、絶対測位を使用する必要があります。

于 2013-03-17T21:36:15.387 に答える