CODEWITHSUNDEEP
htmlcssdropshadow
Deekor
Deekor

Reputation: 9499

Div drop shadow that fades out as you scroll down

I am looking for a way to have my main contents div have a drop shadow that fades away as you scroll down the page. The perfect example is at http://www.gamespot.com/ notice their main content has a drop shadow that makes its pop but then slowly goes away making the site look flat. How is this effect achieved? Thanks!

Screenshot: enter image description here

Upvotes: 1

Views: 687

Answers (1)

DanielJLong
DanielJLong

Reputation: 238

One solution, as briefly mentioned above in the comments, is to use a gradient drop-shadow as demonstrated here:

http://jsfiddle.net/3eDpM/

The other solution (a more static one) is to use a small image in the background, say, a 2px by 40px gradient produced in photoshop. Then, have that image repeat horizontally in the background of the desired div, while positioning it to the top left. Such as:

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

Upvotes: 1

Related Questions