Scrolling shad­ows

Here’s an old idea, but recre­ated with pure CSS.

Orig­i­nally, I had an ex­tra wrap­per and two ex­tra pseudo-el­e­ments on it. Later I de­cided to rewrite the code and to use just a sin­gle el­e­ment (by us­ing ra­dial gra­di­ents).

While this method is sim­ple, there are some lim­i­ta­tions:

  • the back­ground must be solid
    • how­ever, if you'd try back­ground-at­tach­ment: fixed…)
  • there are some po­si­tion­ing is­sues

But in most re­gards this method is rather bul­let­proof.

If you re­place the CSS-gra­di­ents with sim­ple im­ages, this method could work in IE. (It might need a few more small fixes; I didn't check.)


Up­date: Lea Verou up­dated this ex­per­i­ment us­ing the back­ground-at­tach­ment: lo­cal. Read about it in her post.