html - 下にスクロールすると消える Div ドロップ シャドウ

Question

ページを下にスクロールすると消えるドロップ シャドウをメイン コンテンツ div に表示する方法を探しています。完璧な例は、http: //www.gamespot.com/ にあります。メイン コンテンツにはドロップ シャドウがあり、ポップになりますが、ゆっくりと消えてサイトが平らに見えます。この効果はどのように達成されますか？ありがとう！

スクリーンショット:

Answer 1

上記のコメントで簡単に説明したように、1 つの解決策は、ここに示すようにグラデーション ドロップ シャドウを使用することです。

http://jsfiddle.net/3eDpM/

もう 1 つの解決策 (より静的なもの) は、背景に小さな画像を使用することです。たとえば、Photoshop で生成された 2px x 40px のグラデーションです。次に、その画像を目的の div の背景で水平方向に繰り返し、左上に配置します。そのような：

width: 2px;
height: 40px;
background-position: left top;
background-image: url('../img/gradient.png');
background-repeat: repeat-x;