Div ombre portée qui disparaît comme vous faites défiler vers le bas

Question

Je cherche un moyen d'avoir mon contenu principal div une ombre portée qui disparaît lorsque vous faites défiler la page. L'exemple parfait est au http://www.gamespot.com/ notez que leur contenu principal a une ombre portée qui fait sa pop mais qui disparaît lentement pour rendre le site plat. Comment cet effet est-il atteint? Merci!

Screenshot:

Answer 1

Une solution, comme brièvement mentionné ci-dessus dans les commentaires, est d'utiliser une goutte-ombre gradient comme l'a montré ici:

http://jsfiddle.net/3eDpM/

L'autre solution (un plus static one) consiste à utiliser une petite image en arrière-plan, par exemple un dégradé de 2px par 40px produit dans photoshop. Ensuite, faites répéter cette image horizontalement à l'arrière-plan du div désiré, tout en le positionnant en haut à gauche. Tels que:

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