4

Webサイトの可変長コンテンツセクションに複雑な影の背景を作成しようとしています。私はこれを機能させるために知っているすべてのトリックを試しましたが、これを正しく機能させる方法を理解できません。ここのCSS忍者が助けてくれることを願っています。

ここで私が達成しようとしていることの例を見ることができます：http：//mpgnet.com/example.jpg

ご覧のとおり、上下の影は簡単です。右側と左側の影がトラブルメーカーです。上部と下部の150pxは、中央のコンテンツが垂直方向に大きくなるにつれて拡張する必要がある中央部分とは異なります。

ここで非常に注意が必要です。背景が塗りつぶされていないため（この例の画像では影を強調表示しているため）、これらの影は透明な背景を持っている必要があります。また、長さが可変であるため、エンドキャップがどこにあるかわかりません。背景パターンに落ちる。このため、影を繰り返して全体を作り、その上を上下のピースで覆うことはできません。

これを達成する方法についての提案/アイデア/インスピレーションをいただければ幸いです。CSS3の使用は問題ありません。

4

1 に答える 1

9

これはCSS3を使用しているため、IE8以前では機能しませんが、使用できるものを作成したと思います。ここで動作するデモを見ることができます。（ブラウザウィンドウを拡大および縮小するだけで、機能することを確認できます）。

誰かがborder-imageの使用について言及しているのを見ましたが、この方法では画像を必要とせず、ブラウザーのサポートが優れています（特にIE9）。

デザインで上下のシャドウを拡大したり縮小したりする必要がないため、トップシャドウとボトムシャドウは使用しませんでした。

.shadowbox {
    position: relative;
    margin: 100px auto;
    width: 80%;
}

.shadowbox:after {
    position: absolute;
    content: '';
    top: 10px;
    bottom: 10px;
    left: 0;
    width: 20px;
    box-shadow: 0px 0px 15px rgba(0,0,0,0.7);
    border-radius: 50%;
}

.shadowbox:before {
    position: absolute;
    content: '';
    top: 10px;
    bottom: 10px;
    right: 0;
    width: 15px;
    box-shadow: 0px 0px 15px rgba(0,0,0,0.7);
    border-radius: 50%;
}

.shadowbox.content {
    position: relative;
    z-index: 1;
    background: #fff;
    padding: 30px;
    z-index: 10;
}
于 2012-06-06T17:49:27.560 に答える