crolling shadows

Here’s an old idea, but recreated with pure CSS.

Originally, I had an extra wrapper and two extra pseudo-elements on it. Later I decided to rewrite the code and to use just a single element (by using radial gradients).

While this method is simple, there are some limitations:

But in most regards this method is rather bulletproof.

If you replace the CSS-gradients with simple images, this method could work in IE. (It might need a few more small fixes; I didn’t check.)

Enjoy!

Update: Lea Verou updated this experiment using the background-attachment: local. Read about it in her post.

  • Not enough content to scroll
  • 2
  • 3
  • 4
  • 5
  • Ah! Scroll below!
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • The end!
  • No shadow there.

Let me know what you think about this article on Mastodon!

Published on with tags: #Experiment #Practical #CSS