左側と右側にのみドロップシャドウを使用して<div>を作成する
私の目標は、幅960pxの#container divの左側と右側にドロップシャドウを追加することです。
#container自体には、ヘッダー、ナビゲーションメニュー、メインコンテンツ、サイドバー、およびフットが含まれています。ただし、ヘッダー自体は#containerからはみ出しているため、グラフィックが原因でカスタムの幅になっています。
そのため、左右にドロップシャドウが追加されることはありません。ドロップする必要があるのは、下のナビゲーションメニューだけです。これは、ヘッダーがカスタム幅に設定されており、#container自体を超えて突き出ているためです。すでに突き出ているものの左右にドロップシャドウを付けると、美観が損なわれます。
視覚化を改善するために、私のサイトは http://www.doubleyourdating.com/ に似ていますが、ヘッダー要素が両側に突き出ています。
次の解決策を使用して、ナビゲーションメニューから#containerの左側と右側にドロップシャドウを追加しようとしました。
両端に25pxの「フェード」を含む高さ1px、幅1010pxの画像をフォトショップで撮影しました。それを
#container div background-imageとしてCSSしましたが、おそらく#container自体が960px幅に設定されているため、1010px幅の背景が表示されません。 960pxの幅を変更すると、この単純な2列のレイアウトで死のカスケードが作成されることに注意してください。コンテナdivの「周り」にその場しのぎのシャドウボックスdivをCSSで作成しようとしましたが、ヘッダーのカスタム幅がコンテナよりも広くなっているため、機能しません。
これを機能させるにはどうすればよいですか？
あなたはこのようなものを試すことができます：
box-shadow: 6px 0px 5px -5px #999, -6px 0px 5px -5px #999;
もちろん、 値をいじりまわす それがあなたに合うまで。